pds-dev-kit-web-test 2.5.413 → 2.5.414

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

@@ -33,7 +33,8 @@ function Text(props) {
     var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     var index = props.index, _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE, CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA = _b.CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM, _c = props.CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE = _c.CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA = _c.CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA;
     var cLinkValue = function () {
-        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA') {
+        if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
                 return "ERROR: QueryData NOT FOUND";
             }
@@ -71,8 +72,13 @@ function Text(props) {
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
     var textValue = function () {
-        if (CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DATA' && (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
-            return queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
+        var isDataConnected = CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DELEGATEDDATA';
+        if (isDataConnected) {
+            if (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData) {
+                return queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
+            }
+            return 'ERROR';
         }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&
@@ -101,7 +107,7 @@ function Text(props) {
                         e.currentTarget.classList.add('hovered');
                     }, onMouseLeave: function (e) {
                         e.currentTarget.classList.remove('hovered');
-                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: textValue() })) }))] }));
+                    }, className: "cb-layout-box cb-text", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor, height: 'fit-content', minWidth: "calc(2ch + ".concat(layoutStyle.paddingLeft, " + ").concat(layoutStyle.paddingRight, ")") }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: textValue() === 'ERROR' ? 'EDITOR:FALLBACK_TEXT' : textValue() })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [

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

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

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

@@ -0,0 +1,148 @@
+"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 __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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Icon_1 = require("../../../../../../../DynamicLayout/components/pdsOriginal/hybrid/Icon");
+var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
+var styled_components_1 = __importDefault(require("styled-components"));
+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");
+var helper_1 = require("./helper");
+function VideoPlayer(props) {
+    var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_CONTENT_PROP_VIDEO = props.CB_CONTENT_PROP_VIDEO;
+    var index = props.index, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var isEditMode = mode === 'EDIT';
+    var _b = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _b.style, bgColorHoverStyle = _b.hoverStyle;
+    var _c = (0, util_1.parseProperties)(props, device), propsStyle = _c.style, propsHoverStyle = _c.hoverStyle, layoutStyle = _c.layout, effect = _c.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    if (mode === 'EDIT') {
+        propsStyle.visibility = 'visible';
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var _d = (0, react_1.useState)(false), videoStarted = _d[0], setVideoStarted = _d[1];
+    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 CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME, CB_CONTENT_PROP_VIDEO_SPEC_THUMB = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_THUMB, CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY, CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY;
+    var shouldAutoplay = (CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY && device === 'DESKTOP') ||
+        (CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY && device === 'MOBILE');
+    var videoRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(false), videoLoaded = _e[0], setVideoLoaded = _e[1];
+    var _f = (0, react_1.useState)(function () {
+        return (0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).encodedURL;
+    }), videoURL = _f[0], setVideoURL = _f[1];
+    var onVideoError = function () {
+        var fallbackURL = (0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).fallbackURL;
+        var isFallbackURL = fallbackURL === videoURL;
+        if (fallbackURL && !isFallbackURL) {
+            setVideoURL(fallbackURL);
+            return;
+        }
+    };
+    var onLoadedMetadata = function () {
+        setVideoLoaded(true);
+    };
+    var onPlay = function () {
+        var video = videoRef.current;
+        if (!video || isEditMode || videoStarted || shouldAutoplay) {
+            return;
+        }
+        if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
+            video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+            setVideoStarted(true);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        var video = videoRef.current;
+        if (!video || isEditMode || !videoLoaded || !shouldAutoplay) {
+            return;
+        }
+        var handleIntersection = function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    if (typeof CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME === 'number') {
+                        video.currentTime = CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME;
+                    }
+                    video.muted = true;
+                    video.play().catch(function (err) {
+                        // eslint-disable-next-line no-console
+                        console.error('Error: CB VIDEO_PLAYER:', err);
+                    });
+                }
+                else {
+                    video.pause();
+                }
+            });
+        };
+        var observer = new IntersectionObserver(handleIntersection, {
+            threshold: 0.2
+        });
+        observer.observe(video);
+        return function () {
+            observer.disconnect();
+        };
+    }, [videoLoaded, isEditMode, shouldAutoplay]);
+    (0, react_1.useEffect)(function () {
+        setVideoURL((0, helper_1.parseTargetUrl)(CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR).encodedURL);
+    }, [CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR]);
+    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 }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [isEditMode && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                width: '100%',
+                                height: '100%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                transform: 'translate(-50%, -50%)'
+                            } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata, onPlay: onPlay, onError: onVideoError, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
+}
+function getBGColorStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE'
+    ];
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BGCOLOR', device: device });
+}
+var S_Video = styled_components_1.default.video(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  pointer-events: ", ";\n  width: 100%;\n"], ["\n  aspect-ratio: 16 / 9;\n  height: 100%;\n  max-height: 100%;\n  object-fit: cover;\n  pointer-events: ", ";\n  width: 100%;\n"])), function (_a) {
+    var isEditMode = _a.isEditMode;
+    return (isEditMode ? 'none' : 'auto');
+});
+exports.default = VideoPlayer;
+var templateObject_1;

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

@@ -0,0 +1,4 @@
+export declare function parseTargetUrl(url: string): {
+    encodedURL: string;
+    fallbackURL: string | null;
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseTargetUrl = void 0;
+function parseTargetUrl(url) {
+    var _a = url.split('?'), encodedURL = _a[0], query = _a[1];
+    if (!query) {
+        return {
+            encodedURL: encodedURL,
+            fallbackURL: null
+        };
+    }
+    var params = new URLSearchParams(query);
+    var fallbackUrl = params.get('fallbackUrl');
+    if (!fallbackUrl) {
+        return {
+            encodedURL: encodedURL,
+            fallbackURL: null
+        };
+    }
+    return {
+        encodedURL: encodedURL,
+        fallbackURL: "http://".concat(fallbackUrl)
+    };
+}
+exports.parseTargetUrl = parseTargetUrl;

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

@@ -0,0 +1 @@
+export { default as VideoPlayer } from './VideoPlayer';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPlayer = void 0;
+var VideoPlayer_1 = require("./VideoPlayer");
+Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return __importDefault(VideoPlayer_1).default; } });

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX, STRING_PLAIN, VALUE_TYPE } from '../../../util/types';
+import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX, STRING_PLAIN, CCB_VALUE_TYPE, CB_VALUE_TYPE } from '../../../util/types';
 export type StylesProps = {
     normalStyle: React.CSSProperties;
     hoverStyle: React.CSSProperties;
@@ -7,7 +7,7 @@ export type StylesProps = {
 export type CB_CONTENT_PROP_TEXT = {
     CB_CONTENT_PROP_TEXT_SPEC_TEXT: STRING_PLAIN;
     CB_CONTENT_PROP_TEXT_SPEC_TEXTMOBILEALTERNATIVE: STRING_PLAIN;
-    CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE: VALUE_TYPE;
+    CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE: CCB_VALUE_TYPE | CB_VALUE_TYPE;
     CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA: STRING_PLAIN;
 };
 export type CB_CONTENT_PROP_CLINK = {
@@ -15,12 +15,12 @@ export type CB_CONTENT_PROP_CLINK = {
     CB_CONTENT_PROP_CLINK_SPEC_SRC: STRING_PLAIN;
     CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: STRING_PLAIN;
     CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
-    CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE: VALUE_TYPE;
+    CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE: CCB_VALUE_TYPE | CB_VALUE_TYPE;
     CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA: STRING_PLAIN;
 };
 export type CB_CONTENT_PROP_IMAGE = {
     CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR: STRING_PLAIN;
-    CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE: VALUE_TYPE;
+    CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE: CCB_VALUE_TYPE | CB_VALUE_TYPE;
     CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA: STRING_PLAIN;
 };
 export type CB_CONTENT_PROP_TWITTER = {
@@ -30,7 +30,7 @@ export type CB_CONTENT_PROP_CODEBLOCK = {
     CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: STRING_PLAIN;
 };
 export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
-    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: VALUE_TYPE;
+    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: NUMBER_INTEGER;
@@ -39,7 +39,7 @@ export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
 };
 export type CB_CONTENT_PROP_SLIDEBANNER = {
-    CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: VALUE_TYPE;
+    CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING: STRING_PLAIN;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: NUMBER_INTEGER;
@@ -48,7 +48,7 @@ export type CB_CONTENT_PROP_SLIDEBANNER = {
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
 };
 export type CB_CONTENT_PROP_CONTENTSLIST = {
-    CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE: VALUE_TYPE;
+    CB_CONTENT_PROP_CONTENTSLIST_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: STRING_PLAIN;
@@ -144,3 +144,12 @@ export type CB_STYLE_PROP_COLOR_SPECS = CB_STYLE_PROP_COLOR_SPECS_BASE & {
     'CB_STYLE_PROP_COLOR_SPEC_TYPE:MOBILE': CB_STYLE_PROP_COLOR_ENUM_TYPE | null | undefined;
     'CB_STYLE_PROP_COLOR_SPEC_TYPE:MOBILE:HOVER': CB_STYLE_PROP_COLOR_ENUM_TYPE | null | undefined;
 };
+export type CB_CONTENT_PROP_VIDEO = {
+    CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA: STRING_PLAIN;
+    CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: string;
+    CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY: string;
+    CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY: string;
+    CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: number;
+    CB_CONTENT_PROP_VIDEO_SPEC_THUMB: string;
+    CB_CONTENT_PROP_VIDEO_SPEC_TYPE: 'FILE' | 'URL';
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/group.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentBlock } from '../types';
-import type { Layout, LayoutItem } from 'publ-echo-test/dist/lib';
+import type { Layout, LayoutItem } from 'publ-echo/dist/lib';
 export interface LayoutItemWithGroupType extends LayoutItem {
     childrenIds: string[];
     keepInLastIndex?: boolean;

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -1,7 +1,7 @@
-import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE } from './util/types';
+import type { CB_BTN_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_TEXT_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE, CB_VIDEOPLAYER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE } from './util/types';
 import type { IComposition } from '../../../DynamicLayout/types';
 export type CB_TYPES = 'GENERAL';
-export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME | CB_GROUP | CB_LIST | CB_CONTENTSCAROUSEL | CB_SLIDEBANNER;
+export type ComponentBlock = CB_TEXT_TYPE | CB_BTN_TYPE | CB_RICHTEXT | CB_DIVIDER | CB_IMG | CB_YOUTUBE | CB_TWITTER | CB_IFRAME | CB_GROUP | CB_LIST | CB_CONTENTSCAROUSEL | CB_SLIDEBANNER | CB_VIDEOPLAYER;
 type GeneralCustomSectionType = {
     id: number;
     type: 'GENERAL';
@@ -19,7 +19,7 @@ export type GroupCustomSectionType = {
     queryableDefinitionPreset: string;
     dynamicLayoutSectionId: number;
 };
-export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE;
+export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE | CB_VIDEOPLAYER_PROPERTIES_TYPE;
 export type CB_TEXT_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TEXT;
     jsonProperties: {
@@ -56,6 +56,12 @@ export type CB_YOUTUBE = GeneralCustomSectionType & {
         data: CB_YOUTUBE_PROPERTIES_TYPE;
     };
 };
+export type CB_VIDEOPLAYER = GeneralCustomSectionType & {
+    componentBlockCode: CB_ALL_CODES.CB_VIDEOPLAYER;
+    jsonProperties: {
+        data: CB_YOUTUBE_PROPERTIES_TYPE;
+    };
+};
 export type CB_TWITTER = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TWITTER;
     jsonProperties: {
@@ -107,6 +113,7 @@ export declare enum CB_ALL_CODES {
     CB_GROUP = "CB_GROUP",
     CB_LIST = "CB_LIST",
     CB_CONTENTSCAROUSEL = "CB_CONTENTSCAROUSEL",
-    CB_SLIDEBANNER = "CB_SLIDEBANNER"
+    CB_SLIDEBANNER = "CB_SLIDEBANNER",
+    CB_VIDEOPLAYER = "CB_VIDEOPLAYER"
 }
 export {};

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

@@ -15,4 +15,5 @@ var CB_ALL_CODES;
     CB_ALL_CODES["CB_LIST"] = "CB_LIST";
     CB_ALL_CODES["CB_CONTENTSCAROUSEL"] = "CB_CONTENTSCAROUSEL";
     CB_ALL_CODES["CB_SLIDEBANNER"] = "CB_SLIDEBANNER";
+    CB_ALL_CODES["CB_VIDEOPLAYER"] = "CB_VIDEOPLAYER";
 })(CB_ALL_CODES = exports.CB_ALL_CODES || (exports.CB_ALL_CODES = {}));

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parsePlacement.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBlock } from '../types';
-import type { ZOrder } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+import type { ZOrder } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 export declare function parsePlacement(components: ComponentBlock[], zOrders: ZOrder): {
     sm: {
         i: string;

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

@@ -34,7 +34,7 @@ function parsePropPlacement(props, id, cbCode, zOrders) {
         w: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS,
         h: props.CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS,
         z: zOrders.desktop[id],
-        autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT || cbCode === types_1.CB_ALL_CODES.CB_LIST
+        autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT
     };
     var mobileLayout = {
         i: id.toString(),
@@ -43,7 +43,7 @@ function parsePropPlacement(props, id, cbCode, zOrders) {
         w: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE'],
         h: props['CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE'],
         z: zOrders.mobile[id],
-        autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT || cbCode === types_1.CB_ALL_CODES.CB_LIST
+        autoResize: cbCode === types_1.CB_ALL_CODES.CB_TEXT
     };
     return {
         mobileLayout: mobileLayout,

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts

@@ -1,5 +1,5 @@
 import { CB_LAYOUT_PROP_KEYS } from './layoutPropParsers/types';
 import { CB_STYLE_PROP_KEYS } from './stylePropParsers/types';
-import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE } from './types';
+import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE, CB_VIDEOPLAYER_PROPERTIES_TYPE } from './types';
 export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
-export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE, device: Device): ParserResult;
+export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE | CB_VIDEOPLAYER_PROPERTIES_TYPE, device: Device): ParserResult;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -2,7 +2,7 @@ import type { CB_STYLE_PROP_CONTENTSCAROUSEL_SPECS } from '../components/Compone
 import type { CB_STYLE_PROP_CONTENTSLIST_SPECS } from '../components/ComponentBlock/componentBlocks/ContentsList/types';
 import type { CB_STYLE_PROP_SLIDEBANNER_SPECS } from '../components/ComponentBlock/componentBlocks/SlideBanner/types';
 import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
-import type { CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER, CB_STYLE_PROP_COLOR_SPECS, CB_STYLE_PROP_TEXT_SPECS, CB_CONTENT_PROP_CONTENTSLIST } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER, CB_STYLE_PROP_COLOR_SPECS, CB_STYLE_PROP_TEXT_SPECS, CB_CONTENT_PROP_CONTENTSLIST, CB_CONTENT_PROP_VIDEO } from '../components/ComponentBlock/componentBlocks/types';
 import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
 import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
 import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
@@ -22,7 +22,9 @@ export type STRING_PLAIN = string;
 export type ENUM_STRING = string;
 export type NUMBER_INTEGER = number;
 export type STRING_8DIGIT_HEX = string;
-export type VALUE_TYPE = 'VALUE' | 'DATA';
+export type CCB_VALUE_TYPE = 'VALUE' | 'DATA';
+export type CB_VALUE_TYPE = 'VALUE' | 'DELEGATEDDATA' | 'QUERYDATA';
+export type SECTION_VALUE_TYPE = 'VALUE' | 'QUERYDATA';
 export type CB_GENERAL_PROPERTIES_TYPE = {
     CB_PLACEMENT_PROP_PLACEMENT: CB_PLACEMENT_PROP_SPECS;
     CB_CONTENT_PROP_HOVER: {
@@ -139,6 +141,7 @@ export type CB_CONTENTSCAROUSEL_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
     CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
     CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
 };
 export type CB_SLIDEBANNER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_SLIDEBANNER: CB_CONTENT_PROP_SLIDEBANNER;
@@ -168,6 +171,16 @@ export type CB_LIST_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
     CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
 };
+export type CB_VIDEOPLAYER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_CONTENT_PROP_VIDEO: CB_CONTENT_PROP_VIDEO;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
 export type StyleType = {
     style: CSSProperties;
 };

package/dist/src/sub/DynamicLayout/sections/FlexGridCustomSection.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ISection } from '../types';
-import type { Layout } from 'publ-echo-test/dist/lib/GridLayoutEditor/types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
 export type LayoutsType = {
     sm: Layout;
     lg: Layout;

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

@@ -181,7 +181,7 @@ var FlexGridCustomSection = (0, react_1.forwardRef)(function CustomSection(props
             return size.width * 0.0133;
         }
         if (size.width < 1200) {
-            return Math.max(getDefensiveFontSize(device, size.width), 14);
+            return Math.max(getDefensiveFontSize(device, size.width), 16);
         }
         return 16;
     })();

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

@@ -5,7 +5,8 @@ import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util
 import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
 import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
 import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
-import type { Block, ZOrder } from 'publ-echo-test/dist/lib/GridLayoutEditor/group';
+import type { CCB_VALUE_TYPE } from './sections/CustomSection/util/types';
+import type { Block, ZOrder } from 'publ-echo/dist/lib/GridLayoutEditor/group';
 import type { Ref } from 'react';
 export { TypeOfSectionAction };
 export type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
@@ -347,6 +348,8 @@ export type CB_STYLE_PROP_BGMEDIA_SPECS_BASE = {
     CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR: string;
     CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: string;
     CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: number;
+    CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR: string;
+    CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE: CCB_VALUE_TYPE;
 };
 export type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
     'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': number | null | undefined;
@@ -377,6 +380,12 @@ export type CB_STYLE_PROP_BGMEDIA_SPECS = CB_STYLE_PROP_BGMEDIA_SPECS_BASE & {
     'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:HOVER': string | null | undefined;
     'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': string | null | undefined;
     'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': string | null | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR:HOVER'?: string | null;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR:MOBILE'?: string | null;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VIDEOSELECTOR:MOBILE:HOVER'?: string | null;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE:HOVER'?: CCB_VALUE_TYPE | null;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE:MOBILE'?: CCB_VALUE_TYPE | null;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_VALUETYPE:MOBILE:HOVER'?: CCB_VALUE_TYPE | null;
 };
 export interface IComposition {
     id: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.413",
+  "version": "2.5.414",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,8 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.118",
-    "publ-echo-test": "^0.0.213",
+    "publ-echo": "^0.0.119",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,6 +1,6 @@
-# PDS-DEV-KIT-WEB-TEST Release Notes
-## [v2.5.317]
+# PDS-DEV-KIT-WEB Release Notes
+## [v2.2.178]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
-* 3.4 TEST 배포
+* [FIX- BGMEDIA 영상fallbackurl적용]