pds-dev-kit-web-test 2.7.528 → 2.7.529

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

@@ -44,6 +44,7 @@ var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var parseStylePropShadow_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropShadow");
 var styled_components_1 = __importDefault(require("styled-components"));
+var DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
@@ -111,7 +112,10 @@ function Button(props) {
                 }
                 return value;
             }
-            return t('str_10478');
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+            }
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&

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

@@ -48,6 +48,7 @@ var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/comp
 var styled_components_1 = __importStar(require("styled-components"));
 var hooks_1 = require("../../../../hooks");
 var util_1 = require("../../../../util");
+var DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 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");
@@ -108,9 +109,24 @@ function Image(props) {
         }
         return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
     };
-    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.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
-                                ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
-                                : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }) })) })) }))] }));
+    var showDataNotFound = function () {
+        if (mode !== 'EDIT') {
+            return false;
+        }
+        if (CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+            if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+                return true;
+            }
+            if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
+                return true;
+            }
+        }
+        return false;
+    };
+    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.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [(0, jsx_runtime_1.jsx)(S_Image, { src: imgSrc() === 'ERROR'
+                                    ? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
+                                    : imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }), showDataNotFound() && (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" })] })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {

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

@@ -27,6 +27,7 @@ var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts"
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
 var textUtil_1 = require("../../../../newUtils/textUtil");
 var util_1 = require("../../../../util");
+var DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HeightFitContentCover_1 = require("../components/S_HeightFitContentCover");
@@ -122,8 +123,10 @@ function Text(props) {
                 }
                 return value;
             }
-            // NOTE: Query는 있으나 표시할 데이터 없음.
-            return t('str_10478');
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+            }
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&

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

@@ -21,17 +21,20 @@ 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 compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 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 DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 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 _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode, queryData = _a.queryData;
+    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     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';
@@ -53,7 +56,7 @@ function VideoPlayer(props) {
         : 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, CB_CONTENT_PROP_VIDEO_SPEC_REPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_REPLAY, CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME;
+    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, CB_CONTENT_PROP_VIDEO_SPEC_REPLAY = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_REPLAY, CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME, CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE = CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE;
     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);
@@ -140,6 +143,21 @@ function VideoPlayer(props) {
         video.play();
         return;
     };
+    var showDataNotFound = function () {
+        if (mode !== 'EDIT') {
+            return false;
+        }
+        if (CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+            if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+                return true;
+            }
+            if (!queryContext.queryData[CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA]) {
+                return true;
+            }
+        }
+        return false;
+    };
     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%',
@@ -150,7 +168,7 @@ function VideoPlayer(props) {
                                 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, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onPlay: onPlay, onEnded: onEnded, onError: onVideoError, onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
+                            } }, { 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, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onPlay: onPlay, onEnded: onEnded, onError: onVideoError, onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB), showDataNotFound() && (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" })] })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

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

@@ -171,6 +171,7 @@ export type CB_STYLE_PROP_COLOR_SPECS = CB_STYLE_PROP_COLOR_SPECS_BASE & {
 };
 export type CB_CONTENT_PROP_VIDEO = {
     CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA: STRING_PLAIN;
+    CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: 'VALUE' | 'DELEGATEDDATA' | 'DATA';
     CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: string;
     CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY: string;
     CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY: string;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/fallbacks/DataNotFound.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function DataNotFound({ stringKey }: {
+    stringKey: string;
+}): JSX.Element;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/fallbacks/DataNotFound.js

@@ -0,0 +1,32 @@
+"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 __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_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+function DataNotFound(_a) {
+    var stringKey = _a.stringKey;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    return (0, jsx_runtime_1.jsx)(S_DataNotFound, { children: t(stringKey) });
+}
+exports.default = DataNotFound;
+var S_DataNotFound = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption1;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.caption1;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.528",
+  "version": "2.7.529",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",