pds-dev-kit-web-test 0.3.7 → 0.3.8

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

@@ -50,7 +50,7 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function Divider(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
-    var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
+    var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect, hoverEffect = _b.hoverEffect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -64,7 +64,7 @@ function Divider(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign({}, propsHoverStyle) }) })) }))] }));
+    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_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: layoutStyle, hoverStyle: {} }, { children: (0, jsx_runtime_1.jsx)(S_DIVIDER, { className: "cb-divider", normalStyle: __assign(__assign({}, propsStyle), effectCssProperties), hoverStyle: __assign(__assign({}, propsHoverStyle), hoverEffect) }) })) }))] }));
 }
 var S_DIVIDER = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;

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

@@ -60,7 +60,7 @@ function Image(props) {
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
     }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
-    var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect;
+    var _d = (0, util_1.parseProperties)(props, device), style = _d.style, hoverStyle = _d.hoverStyle, layout = _d.layout, effect = _d.effect, hoverEffect = _d.hoverEffect;
     var _e = parseImageCBStyle(style, hoverStyle, mode), boxStyle = _e.boxStyle, imgStyle = _e.imgStyle;
     var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
     var cbRef = (0, react_1.useRef)(null);
@@ -72,7 +72,7 @@ function Image(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }) })) })) })) }))] }));
+    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({ normalStyle: __assign({}, effectCssProperties), hoveEffect: __assign({}, hoverEffect) }, { 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, __assign({ src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }, { children: (0, jsx_runtime_1.jsx)("img", { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, style: { visibility: 'hidden', width: '100%', height: '100%' } }) })) })) })) }))] }));
 }
 function parseImageCBStyle(style, hoverStyle, mode) {
     var boxStyle = {
@@ -113,26 +113,32 @@ function parseImageCBStyle(style, hoverStyle, mode) {
     };
     return { boxStyle: boxStyle, imgStyle: imgStyle };
 }
-var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
-var S_Image = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
+var S_ImageWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"])), function (_a) {
+    var normalStyle = _a.normalStyle;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign({}, normalStyle));
+}, function (_a) {
+    var hoveEffect = _a.hoveEffect;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign({}, hoveEffect));
+});
+var S_Image = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"], ["\n  background-image: ", ";\n  background-repeat: no-repeat;\n  height: 100%;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n\n  & img {\n    ", ";\n  }\n\n  &:hover img {\n    ", ";\n  }\n"])), function (_a) {
     var src = _a.src;
     return "url(".concat(src, ")");
 }, function (_a) {
     var normalStyle = _a.normalStyle;
-    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
 }, function (_a) {
     var hoverStyle = _a.hoverStyle;
-    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
 }, function (_a) {
     var normalStyle = _a.normalStyle;
     var isContain = normalStyle.backgroundSize === 'contain';
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+    return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
 }, function (_a) {
     var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
     var isContain = hoverStyle.backgroundSize
         ? hoverStyle.backgroundSize === 'contain'
         : normalStyle.backgroundSize === 'contain';
-    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
+    return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        object-fit: ", ";\n      "], ["\n        object-fit: ", ";\n      "])), isContain ? 'contain' : 'cover');
 });
 exports.default = Image;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -33,7 +33,7 @@ var S_HiddenCover_1 = require("../components/S_HiddenCover");
 function RichText(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var 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 _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect;
+    var _b = (0, util_1.parseProperties)(props, device), propsStyle = _b.style, propsHoverStyle = _b.hoverStyle, layoutStyle = _b.layout, effect = _b.effect, hoverEffect = _b.hoverEffect;
     var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
@@ -48,7 +48,7 @@ function RichText(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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_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: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }) }) })) }))] }));
+    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_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign(__assign({}, propsHoverStyle), bgColorHoverStyle), hoverEffect), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(S_RichTextWrapper, { children: (0, jsx_runtime_1.jsx)(RichText_1.RichText, { text: props.CB_CONTENT_PROP_TEXTEDIT.CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR }) }) })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

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

@@ -37,7 +37,7 @@ function Text(props) {
         internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
     }), CLINKCursor = _c.CLINKCursor, onClickCLINK = _c.onClickCLINK;
     var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
-    var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
+    var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect, hoverEffect = _e.hoverEffect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextCB)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
@@ -53,7 +53,7 @@ function Text(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: 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 }, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { whiteSpace: 'pre-wrap', wordBreak: 'break-word', cursor: CLINKCursor }), hoverStyle: __assign(__assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), hoverEffect), { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }), onClick: onClickCLINK }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT })) }))] }));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [

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

@@ -24,7 +24,7 @@ function Twitter(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var CB_CONTENT_PROP_TWITTER_SPEC_SRC = props.CB_CONTENT_PROP_TWITTER.CB_CONTENT_PROP_TWITTER_SPEC_SRC, CB_STYLE_PROP_TWITTER_SPEC_THEME = props.CB_STYLE_PROP_TWITTER.CB_STYLE_PROP_TWITTER_SPEC_THEME, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW;
-    var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
+    var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect, hoverEffect = _b.hoverEffect;
     var userId = CB_CONTENT_PROP_TWITTER_SPEC_SRC.replace('https://twitter.com/', '');
     var theme = CB_STYLE_PROP_TWITTER_SPEC_THEME.toLowerCase();
     if ('display' in layout) {
@@ -47,6 +47,6 @@ function Twitter(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    return ((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", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, twitterTimelineKey) })) })));
+    return ((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", normalStyle: __assign(__assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), editModeStyle), hoverStyle: __assign(__assign({}, hoverStyle), hoverEffect), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, twitterTimelineKey) })) })));
 }
 exports.default = Twitter;

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

@@ -35,7 +35,7 @@ function Youtube(props) {
     var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
     var isEditMode = mode === 'EDIT';
     var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
-    var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
+    var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect, hoverEffect = _d.hoverEffect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
@@ -49,7 +49,7 @@ function Youtube(props) {
         : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
     var hasEffect = !isNoneEffectType;
     var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
-    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_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.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
+    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_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign(__assign({}, propsHoverStyle), bgColorHoverStyle), hoverEffect), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

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

@@ -1,3 +1,3 @@
 import { NamedEffectPropType } from './types';
-import type { Device, StyleType } from '../types';
-export declare function parseEffectProperties(namedProps: NamedEffectPropType, device: Device): StyleType;
+import type { Device, StyleAndHoverStyle } from '../types';
+export declare function parseEffectProperties(namedProps: NamedEffectPropType, device: Device): Partial<StyleAndHoverStyle>;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/effectPropParsers/index.js

@@ -5,12 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseEffectProperties = void 0;
 var parseEffectPropEntAnim_1 = __importDefault(require("./parseEffectPropEntAnim"));
+var parseEffectPropHoverAnim_1 = __importDefault(require("./parseEffectPropHoverAnim"));
 var types_1 = require("./types");
 function parseEffectProperties(namedProps, device) {
     var name = namedProps.name;
     switch (name) {
         case types_1.CB_EFFECT_PROP_KEYS.CB_EFFECT_PROP_ENTANIM:
             return (0, parseEffectPropEntAnim_1.default)(namedProps, device);
+        case types_1.CB_EFFECT_PROP_KEYS.CB_EFFECT_PROP_HOVERANIM:
+            return (0, parseEffectPropHoverAnim_1.default)(namedProps, device);
     }
 }
 exports.parseEffectProperties = parseEffectProperties;

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

@@ -0,0 +1,19 @@
+import type { Device, HoverStyle } from '../types';
+import type { CB_EFFECT_PROP_KEYS } from './types';
+export type NAMED_CB_EFFECT_HOVERANIM_PROPS = {
+    name: CB_EFFECT_PROP_KEYS.CB_EFFECT_PROP_HOVERANIM;
+    specs: CB_EFFECT_PROP_HOVERANIM_SPECS;
+};
+export default function parseEffectPropHOVERANIM(namedProps: NAMED_CB_EFFECT_HOVERANIM_PROPS, device: Device): HoverStyle;
+export type CB_EFFECT_PROP_HOVERANIM_BASE = {
+    CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION: number;
+    CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT: number;
+    CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC: string;
+    CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE: string;
+};
+export type CB_EFFECT_PROP_HOVERANIM_SPECS = CB_EFFECT_PROP_HOVERANIM_BASE & Partial<{
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION:MOBILE': number | undefined;
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT:MOBILE': number | undefined;
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC:MOBILE': string | undefined;
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE:MOBILE': string | undefined;
+}>;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/effectPropParsers/parseEffectPropHoverAnim.js

@@ -0,0 +1,51 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var constants_1 = require("./constants");
+function parseEffectPropHOVERANIM(namedProps, device) {
+    var specs = namedProps.specs;
+    var animationCssProperties = AVAILABLE_SPECS.reduce(function (acc, cur) {
+        var _a;
+        var baseKey = device === 'DESKTOP' ? cur : "".concat(cur, ":MOBILE");
+        var value = specs[baseKey];
+        return __assign(__assign({}, acc), (_a = {}, _a[cur] = value, _a));
+    }, {});
+    return { hoverStyle: { animation: valueGenerator(animationCssProperties) } };
+}
+exports.default = parseEffectPropHOVERANIM;
+function valueGenerator(valueSet) {
+    var _a;
+    var CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE = valueSet.CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE, CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION = valueSet.CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION, CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC = valueSet.CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC, CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT = valueSet.CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT;
+    var animationName = (_a = constants_1.animations.find(function (animation) { return animation.name === CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE; })) === null || _a === void 0 ? void 0 : _a.value;
+    return "".concat(animationName, " ").concat(CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION, "s ").concat(tFuncMatcher(CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC), " 0s ").concat(CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT === -1 ? 'infinite' : CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT);
+}
+function tFuncMatcher(type) {
+    switch (type) {
+        case 'EASEINOUT':
+            return 'ease-in-out';
+        case 'EASEIN':
+            return 'ease-in';
+        case 'EASEOUT':
+            return 'ease-out';
+        case 'NONE':
+            return 'linear';
+        default:
+            return '';
+    }
+}
+var AVAILABLE_SPECS = [
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_DURATION',
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_REPEAT',
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_TFUNC',
+    'CB_EFFECT_PROP_HOVERANIM_SPEC_TYPE'
+];

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

@@ -1,5 +1,7 @@
 import type { NAMED_CB_EFFECT_ENTANIM_PROPS } from './parseEffectPropEntAnim';
+import type { NAMED_CB_EFFECT_HOVERANIM_PROPS } from './parseEffectPropHoverAnim';
 export declare enum CB_EFFECT_PROP_KEYS {
-    CB_EFFECT_PROP_ENTANIM = "CB_EFFECT_PROP_ENTANIM"
+    CB_EFFECT_PROP_ENTANIM = "CB_EFFECT_PROP_ENTANIM",
+    CB_EFFECT_PROP_HOVERANIM = "CB_EFFECT_PROP_HOVERANIM"
 }
-export type NamedEffectPropType = NAMED_CB_EFFECT_ENTANIM_PROPS;
+export type NamedEffectPropType = NAMED_CB_EFFECT_ENTANIM_PROPS | NAMED_CB_EFFECT_HOVERANIM_PROPS;

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

@@ -4,4 +4,5 @@ exports.CB_EFFECT_PROP_KEYS = void 0;
 var CB_EFFECT_PROP_KEYS;
 (function (CB_EFFECT_PROP_KEYS) {
     CB_EFFECT_PROP_KEYS["CB_EFFECT_PROP_ENTANIM"] = "CB_EFFECT_PROP_ENTANIM";
+    CB_EFFECT_PROP_KEYS["CB_EFFECT_PROP_HOVERANIM"] = "CB_EFFECT_PROP_HOVERANIM";
 })(CB_EFFECT_PROP_KEYS = exports.CB_EFFECT_PROP_KEYS || (exports.CB_EFFECT_PROP_KEYS = {}));

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

@@ -39,8 +39,8 @@ function parseProperties(properties, device) {
             return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style) });
         }
         if (normalizedProperty.name in types_2.CB_EFFECT_PROP_KEYS) {
-            var style = (0, effectPropParsers_1.parseEffectProperties)(normalizedProperty, device).style;
-            return __assign(__assign({}, acc), { effect: __assign(__assign({}, acc.effect), style) });
+            var _b = (0, effectPropParsers_1.parseEffectProperties)(normalizedProperty, device), style = _b.style, hoverStyle = _b.hoverStyle;
+            return __assign(__assign({}, acc), { effect: __assign(__assign({}, acc.effect), style), hoverEffect: __assign(__assign({}, acc.hoverEffect), hoverStyle) });
         }
         return acc;
     }, {

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

@@ -115,9 +115,11 @@ export type CB_YOUTUBE_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
 export type StyleType = {
     style: CSSProperties;
 };
-export type StyleAndHoverStyle = StyleType & {
+export type HoverStyle = {
     hoverStyle: CSSProperties;
 };
+export type StyleAndHoverStyle = StyleType & HoverStyle;
+export type StyleOrHoverStyle = StyleType | HoverStyle;
 export type OverlayStyle = {
     overlayStyle: CSSProperties;
 };
@@ -128,6 +130,7 @@ export type ParserResult = {
     hoverStyle: CSSProperties;
     layout: CSSProperties;
     effect: CSSProperties;
+    hoverEffect?: CSSProperties;
     content: Record<string, unknown>;
 };
 export type JsonPropertiesParserResult = Omit<ParserResult, 'hoverStyle'> & OverlayStyle;

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.7]
-## 기준 pds-dev-kit-web 버전 @2.2.26
+## [v0.3.8]
+## 기준 pds-dev-kit-web 버전 @2.2.34
 ### sub
     * DynamicLayout
-        * 선택된 CB에 투명도 0.95추가
+        * hover effect 추가