pds-dev-kit-web-test 2.5.315 → 2.5.317

package/dist/src/sub/DynamicLayout/mock_slideBanner.js

@@ -0,0 +1,318 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SAMPLE_SLIDE_BANNER_CB = void 0;
+var mock_composition_1 = require("./mock_composition");
+var types_1 = require("./sections/CustomSection/types");
+exports.SAMPLE_SLIDE_BANNER_CB = {
+    availablePlugins: [],
+    componentBlockCode: types_1.CB_ALL_CODES.CB_SLIDE_BANNER,
+    dynamicLayoutSectionId: 18662,
+    type: 'GENERAL',
+    id: 188291,
+    blockId: 'CB_188291',
+    jsonProperties: {
+        data: {
+            CB_PLACEMENT_PROP_PLACEMENT: {
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 10,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 10,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 24,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 24,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 10,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 0,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 10,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 0,
+                CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 3,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 2,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LATEST_LOCKED_STARTY:MOBILE': 2,
+                'CB_PLACEMENT_PROP_PLACEMENT_SPEC_LOCKSTATUS:MOBILE': 'FALLBACK_TO_SYNC'
+            },
+            CB_STYLE_PROP_SLIDE_BANNER: {
+                // Base properties
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE: 'OPTION_1',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE: 'OPTION_4',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION: 'OPTION_20',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE: 'MEDIUM',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE: 'OPTION_14',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION: 'OPTION_20',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE: 'MEDIUM',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE: 'OPTION_14',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION: 'OPTION_16',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE: 'MEDIUM',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR: 'NONE',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE: 'SMALL',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE: 'NONE',
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME: 5,
+                CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL: 'NONE',
+                // Hover state
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE:HOVER': 'OPTION_1',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE:HOVER': 'OPTION_4',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION:HOVER': 'OPTION_3',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE:HOVER': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE:HOVER': 'OPTION_14',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION:HOVER': 'OPTION_20',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE:HOVER': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE:HOVER': 'OPTION_14',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION:HOVER': 'OPTION_16',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE:HOVER': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR:HOVER': 'NONE',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE:HOVER': 'SMALL',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE:HOVER': 'NONE',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME:HOVER': 5,
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL:HOVER': 'NONE',
+                // Mobile state
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE:MOBILE': 'OPTION_1',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE:MOBILE': 'OPTION_10',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION:MOBILE': 'OPTION_19',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE:MOBILE': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE:MOBILE': 'OPTION_2',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION:MOBILE': 'OPTION_1',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE:MOBILE': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE:MOBILE': 'OPTION_2',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION:MOBILE': 'OPTION_3',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE:MOBILE': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR:MOBILE': 'OPTION_2',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE:MOBILE': 'SMALL',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE:MOBILE': 'USE',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME:MOBILE': 5,
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL:MOBILE': 'USE',
+                // Mobile hover state
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_STYLE:MOBILE:HOVER': 'OPTION_1',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSTYLE:MOBILE:HOVER': 'OPTION_12',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONLOCATION:MOBILE:HOVER': 'OPTION_20',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PAGINATIONSIZE:MOBILE:HOVER': 'SMALL',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSTYLE:MOBILE:HOVER': 'OPTION_2',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNLOCATION:MOBILE:HOVER': 'OPTION_1',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PREVBTNSIZE:MOBILE:HOVER': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSTYLE:MOBILE:HOVER': 'OPTION_2',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNLOCATION:MOBILE:HOVER': 'OPTION_3',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_NEXTBTNSIZE:MOBILE:HOVER': 'MEDIUM',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBAR:MOBILE:HOVER': 'OPTION_2',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_PROGRESSBARSIZE:MOBILE:HOVER': 'SMALL',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYUSE:MOBILE:HOVER': 'USE',
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_AUTOPLAYTIME:MOBILE:HOVER': 5,
+                'CB_STYLE_PROP_SLIDE_BANNER_SPEC_INFINITESCROLL:MOBILE:HOVER': 'NONE'
+            },
+            CB_CONTENT_PROP_SLIDE_BANNER: {
+                CB_CONTENT_PROP_SLIDE_BANNER_SPEC_VALUE_TYPE: 'A',
+                CB_CONTENT_PROP_SLIDE_BANNER_SPEC_CONNECT_DATA: '아티클:포스트',
+                CB_CONTENT_PROP_SLIDE_BANNER_SPEC_DATASORTING: '최신순',
+                CB_CONTENT_PROP_SLIDE_BANNER_SPEC_OFFSET: '1',
+                CB_CONTENT_PROP_SLIDE_BANNER_SPEC_MENUALITEM: [],
+                CB_CONTENT_PROP_SLIDE_BANNER_SPEC_ITEMCOUNTS: 50,
+                CB_CONTENT_PROP_SLIDE_BANNER_SPEC_DISPLAYCOUNTS: 1
+            },
+            CB_STYLE_PROP_BORDER: {
+                CB_STYLE_PROP_BORDER_SPEC_STYLE: 'SOLID',
+                'CB_STYLE_PROP_BORDER_SPEC_STYLE:HOVER': 'SOLID',
+                'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE': 'DASHED',
+                'CB_STYLE_PROP_BORDER_SPEC_STYLE:MOBILE:HOVER': 'DOTTED',
+                CB_STYLE_PROP_BORDER_SPEC_WIDTH: 0,
+                'CB_STYLE_PROP_BORDER_SPEC_WIDTH:HOVER': 0,
+                'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE': 0,
+                'CB_STYLE_PROP_BORDER_SPEC_WIDTH:MOBILE:HOVER': 0,
+                CB_STYLE_PROP_BORDER_SPEC_COLOR: '#FF573300',
+                'CB_STYLE_PROP_BORDER_SPEC_COLOR:HOVER': '#FF573300',
+                'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE': '#00FF5733',
+                'CB_STYLE_PROP_BORDER_SPEC_COLOR:MOBILE:HOVER': '#5733FF00',
+                CB_STYLE_PROP_BORDER_SPEC_RADIUS: { tl: 5, tr: 5, bl: 5, br: 5 },
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUS:HOVER': { tl: 5, tr: 5, bl: 5, br: 5 },
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE': { tl: 10, tr: 10, bl: 10, br: 10 },
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUS:MOBILE:HOVER': { tl: 15, tr: 15, bl: 15, br: 15 },
+                CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX: true,
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:HOVER': true,
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE': false,
+                'CB_STYLE_PROP_BORDER_SPEC_RADIUSFIX:MOBILE:HOVER': true
+            },
+            CB_STYLE_PROP_SHADOW: {
+                CB_STYLE_PROP_SHADOW_SPEC_BLUR: 24,
+                'CB_STYLE_PROP_SHADOW_SPEC_BLUR:HOVER': 24,
+                'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_BLUR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SHADOW_SPEC_COLOR: '#000000',
+                'CB_STYLE_PROP_SHADOW_SPEC_COLOR:HOVER': '#000000',
+                'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_COLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SHADOW_SPEC_OPACITY: 30,
+                'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER': 30,
+                'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SHADOW_SPEC_SPREAD: 2,
+                'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:HOVER': 2,
+                'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_SPREAD:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SHADOW_SPEC_TYPE: 'OUTSET',
+                'CB_STYLE_PROP_SHADOW_SPEC_TYPE:HOVER': 'OUTSET',
+                'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_TYPE:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SHADOW_SPEC_X: 0,
+                'CB_STYLE_PROP_SHADOW_SPEC_X:HOVER': 0,
+                'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_X:MOBILE:HOVER': null,
+                CB_STYLE_PROP_SHADOW_SPEC_Y: 12,
+                'CB_STYLE_PROP_SHADOW_SPEC_Y:HOVER': 12,
+                'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE': null,
+                'CB_STYLE_PROP_SHADOW_SPEC_Y:MOBILE:HOVER': null
+            },
+            CB_STYLE_PROP_OPACITY: {
+                CB_STYLE_PROP_OPACITY_SPEC_OPACITY: 100,
+                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:HOVER': 100,
+                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE': null,
+                'CB_STYLE_PROP_OPACITY_SPEC_OPACITY:MOBILE:HOVER': null
+            },
+            CB_STYLE_PROP_BGCOLOR: {
+                CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE: 90,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:HOVER': 90,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_COLOR: '#455EEFFF',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:HOVER': '#455EEFFF',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR: '#ff0000',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:HOVER': '#27FFBFFF',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC: 100,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:HOVER': 100,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT: 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:HOVER': 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR: 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:HOVER': 'NONE',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC: 0,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:HOVER': 0,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE:HOVER': null,
+                CB_STYLE_PROP_BGCOLOR_SPEC_TYPE: 'SOLID',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:HOVER': 'SOLID',
+                'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE': null,
+                'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': null
+            },
+            CB_STYLE_PROP_BGOVERLAY: {
+                CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE: 45,
+                CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR: '#FF573300',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR: '#00FF5733',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC: 80,
+                CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT: 'LINEAR',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR: '#5733FF00',
+                CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC: 20,
+                CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE: 'OVERLAY',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:HOVER': 60,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE': 30,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ANGLE:MOBILE:HOVER': 90,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:HOVER': '#AA573300',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE': '#BBFF5733',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_COLOR:MOBILE:HOVER': '#CC5733FF',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:HOVER': '#DD573300',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE': '#EEFF5733',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDCOLOR:MOBILE:HOVER': '#FF5733FF',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:HOVER': 85,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE': 75,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_ENDLOC:MOBILE:HOVER': 95,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:HOVER': 'RADIAL',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE': 'LINEAR',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_GRADIENT:MOBILE:HOVER': 'CONIC',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:HOVER': '#11573300',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE': '#225733FF',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTCOLOR:MOBILE:HOVER': '#3357FF00',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:HOVER': 25,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE': 15,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_STARTLOC:MOBILE:HOVER': 35,
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:HOVER': 'BLEND',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE': 'MIX',
+                'CB_STYLE_PROP_BGOVERLAY_SPEC_TYPE:MOBILE:HOVER': 'OVERLAY'
+            },
+            CB_STYLE_PROP_BGMEDIA: {
+                // Base properties
+                CB_STYLE_PROP_BGMEDIA_SPEC_YSRC: 'https://example.com/video.mp4',
+                CB_STYLE_PROP_BGMEDIA_SPEC_TYPE: 'video',
+                CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL: true,
+                CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME: 0,
+                CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: false,
+                CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY: true,
+                CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION: 'center',
+                CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR: '.background-image',
+                CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: 'cover',
+                CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: 60,
+                // Hover state
+                'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': 65,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': 'contain',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:HOVER': '.bg-hover',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': 'top',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:HOVER': true,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:HOVER': 5,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:HOVER': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER': 'gif',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:HOVER': 'https://example.com/hover-video.mp4',
+                // Mobile state
+                'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE': 55,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': 'fill',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE': '.bg-mobile',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE': 'bottom',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY:MOBILE': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': true,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE': 10,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE': true,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE': 'image',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': 'https://example.com/mobile-video.mp4',
+                // Mobile hover state
+                'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE:HOVER': 70,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER': 'scale-down',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE:HOVER': '.bg-mobile-hover',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER': 'left',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE:HOVER': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE:HOVER': 15,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE:HOVER': false,
+                'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER': 'video',
+                'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': 'https://example.com/mobile-hover-video.mp4'
+            },
+            CB_LAYOUT_PROP_PADDING: {
+                CB_LAYOUT_PROP_PADDING_SPEC_PADDING: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                },
+                'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                },
+                CB_LAYOUT_PROP_PADDING_SPEC_FIX: true,
+                'CB_LAYOUT_PROP_PADDING_SPEC_FIX:MOBILE': false
+            },
+            CB_CONTENT_PROP_HOVER: {
+                CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
+            },
+            CB_LAYOUT_PROP_ARRANGE: {
+                CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'CENTER',
+                'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': 'CENTER',
+                CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: 'MIDDLE',
+                'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': undefined
+            },
+            CB_CONTENT_PROP_VISIBILITY: {
+                CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
+                CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
+            },
+            CB_EFFECT_PROP_ENTANIM: {
+                CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'SLIDEINLEFT',
+                'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': 'SLIDEINLEFT',
+                CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
+                'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': undefined,
+                CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
+                'CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT:MOBILE': undefined,
+                CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC: 'EASEINOUT',
+                'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': undefined
+            }
+        }
+    },
+    queryableDefinitionPreset: 'N/A',
+    queryableTapSrc: 'N/A',
+    compositions: [mock_composition_1.sampleMockComposition2, mock_composition_1.sampleMockComposition1]
+};

package/dist/src/sub/DynamicLayout/mocks.d.ts

@@ -1,7 +1,7 @@
 export declare const MOCK_SECTIONS: {
     administrativeTitle: string;
     appearanceTemplate: string;
-    componentBlocks: ({
+    componentBlocks: (import("./sections/CustomSection/types").CB_CONTENTS_CAROUSEL | import("./sections/CustomSection/types").CB_SLIDE_BANNER | {
         availablePlugins: never[];
         blockId: string;
         componentBlockCode: string;
@@ -997,6 +997,8 @@ export declare const MOCK_SECTIONS: {
                 '188285': number;
                 '188286': number;
                 '188287': number;
+                '188290': number;
+                '188291': number;
             };
             mobile: {
                 '188262': number;
@@ -1025,6 +1027,8 @@ export declare const MOCK_SECTIONS: {
                 '188285': number;
                 '188286': number;
                 '188287': number;
+                '188290': number;
+                '188291': number;
             };
         };
     };

package/dist/src/sub/DynamicLayout/mocks.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MOCK_SECTIONS = void 0;
+var mock_contentsCarousel_1 = require("./mock_contentsCarousel");
+var mock_slideBanner_1 = require("./mock_slideBanner");
 exports.MOCK_SECTIONS = [
     {
         administrativeTitle: 'Daily Pages',
         appearanceTemplate: 'GENERAL_A',
         componentBlocks: [
+            mock_slideBanner_1.SAMPLE_SLIDE_BANNER_CB,
+            mock_contentsCarousel_1.SAMPLE_CONTENTSCAROUSEL_CB,
             {
                 availablePlugins: [],
                 blockId: 'CB_188265',
@@ -3846,14 +3850,14 @@ exports.MOCK_SECTIONS = [
                             'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
                         },
                         CB_PLACEMENT_PROP_PLACEMENT: {
-                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 28,
-                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 12,
-                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 10,
-                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 10,
-                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: -1,
-                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': -1,
-                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: -1,
-                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': -1,
+                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 24,
+                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
+                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 2,
+                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 2,
+                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 0,
+                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 0,
+                            CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 0,
+                            'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 0,
                             CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 1,
                             'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 1
                         },
@@ -4624,6 +4628,22 @@ exports.MOCK_SECTIONS = [
                         type: 'COMPONENT_BLOCK',
                         zOrderDesktopInternal: 26,
                         zOrderMobileInternal: 25
+                    },
+                    {
+                        blockId: 'CB_188290',
+                        children: [],
+                        componentBlockId: 188290,
+                        type: 'COMPONENT_BLOCK',
+                        zOrderDesktopInternal: 27,
+                        zOrderMobileInternal: 27
+                    },
+                    {
+                        blockId: 'CB_188291',
+                        children: [],
+                        componentBlockId: 188291,
+                        type: 'COMPONENT_BLOCK',
+                        zOrderDesktopInternal: 28,
+                        zOrderMobileInternal: 28
                     }
                 ],
                 componentBlockId: null,
@@ -4659,7 +4679,9 @@ exports.MOCK_SECTIONS = [
                     '188284': 13,
                     '188285': 14,
                     '188286': 26,
-                    '188287': 19
+                    '188287': 19,
+                    '188290': 27,
+                    '188291': 28
                 },
                 mobile: {
                     '188262': 10,
@@ -4687,7 +4709,9 @@ exports.MOCK_SECTIONS = [
                     '188284': 18,
                     '188285': 17,
                     '188286': 25,
-                    '188287': 19
+                    '188287': 19,
+                    '188290': 27,
+                    '188291': 28
                 }
             }
         },

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -55,9 +55,9 @@ var publ_echo_1 = require("publ-echo");
 var group_1 = require("publ-echo/dist/lib/GridLayoutEditor/group");
 var renderHelpers_1 = require("publ-echo/dist/lib/GridLayoutEditor/utils/renderHelpers");
 var react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
-var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
-var gleStyles_1 = require("../../../DynamicLayout/gleStyles");
+var ErrorBoundary_1 = require("@sub/DynamicLayout/components/Section/ErrorBoundary");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+var gleStyles_1 = require("@sub/DynamicLayout/gleStyles");
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
@@ -703,9 +703,10 @@ var CustomSection = (0, react_1.forwardRef)(function CustomSection(props, ref) {
         setSelectedBlockId(null);
         sectionActionHandler &&
             sectionActionHandler({
-                type: '@CUSTOMSECTION/SECTION_CLICKED',
+                type: '@CUSTOMSECTION/SECTION_RIGHT_CLICKED',
                 payload: {
-                    sectionId: props.id
+                    sectionId: props.id,
+                    e: e
                 }
             });
     };

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

@@ -19,11 +19,12 @@ require("react");
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
-var ContentsCarousel_1 = __importDefault(require("./componentBlocks/ContentsCarousel/ContentsCarousel"));
+var ContentsCarousel_1 = require("./componentBlocks/ContentsCarousel");
 var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
 var RichText_1 = require("./componentBlocks/RichText");
+var SlideBanner_1 = require("./componentBlocks/SlideBanner");
 var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
 var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
 var Youtube_1 = require("./componentBlocks/Youtube");
@@ -50,7 +51,11 @@ function ComponentBlockMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
         case types_1.CB_ALL_CODES.CB_CONTENTS_CAROUSEL: {
             var compositions = cbProps.compositions;
-            return ((0, jsx_runtime_1.jsx)(ContentsCarousel_1.default, __assign({}, propsWithValue, { compositions: compositions, index: index })));
+            return ((0, jsx_runtime_1.jsx)(ContentsCarousel_1.ContentsCarousel, __assign({}, propsWithValue, { compositions: compositions, index: index })));
+        }
+        case types_1.CB_ALL_CODES.CB_SLIDE_BANNER: {
+            var compositions = cbProps.compositions;
+            return ((0, jsx_runtime_1.jsx)(SlideBanner_1.SlideBanner, __assign({}, propsWithValue, { compositions: compositions, index: index })));
         }
         default:
             return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
+import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
 type Props = CB_BTN_PROPERTIES_TYPE & IndexForIntersection;
 declare function Button(props: Props): JSX.Element;
 export default Button;

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

@@ -28,12 +28,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
-var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
-var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
-var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
-var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
-var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
-var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var useGoogleFonts_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
+var newUtils_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
@@ -67,26 +67,6 @@ function Button(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    var textValue = function () {
-        if (device === 'MOBILE' &&
-            mode !== 'EDIT' &&
-            props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB === false) {
-            return '';
-        }
-        if (device === 'DESKTOP' &&
-            mode !== 'EDIT' &&
-            props.CB_CONTENT_PROP_VISIBILITY.CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP === false) {
-            return '';
-        }
-        if (device === 'MOBILE') {
-            var value = props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE;
-            if (value === null || value === undefined) {
-                return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
-            }
-            return value;
-        }
-        return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
-    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle, style: {
                     paddingLeft: paddingLeft,
                     paddingRight: paddingRight,
@@ -94,7 +74,7 @@ function Button(props) {
                     paddingTop: paddingTop
                 } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ onMouseLeave: function (e) {
                         e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: textValue() })) }))] }));
+                    }, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign(__assign({}, btnTextStyle), propsStyle), layoutStyle), effectCssProperties), btnColorStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, btnTextHoverStyle), propsHoverStyle), btnColorHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getBTNStyles(props, device) {
     var availableSpecCodes = [

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { CB_CONTENTS_CAROUSEL } from '../../../../../../../DynamicLayout/sections/CustomSection/types';
-import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
-type Props = CB_BTN_PROPERTIES_TYPE & IndexForIntersection & {
+import type { CB_CONTENTS_CAROUSEL } from '@sub/DynamicLayout/sections/CustomSection/types';
+import type { CB_CONTENTS_CAROUSEL_PROPERTIES_TYPE, IndexForIntersection } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+type Props = CB_CONTENTS_CAROUSEL_PROPERTIES_TYPE & IndexForIntersection & {
     compositions: CB_CONTENTS_CAROUSEL['compositions'];
 };
 declare function ContentsCarousel(props: Props): JSX.Element;