pds-dev-kit-web-test 2.4.14 → 2.4.15

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

@@ -0,0 +1,59 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var hooks_1 = require("../../hooks");
+function ComponentBlock(_a) {
+    var ani = _a.ani, children = _a.children, index = _a.index;
+    var ref = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(ref, { threshold: 0 }, [index]);
+    var isInViewport = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    return ((0, jsx_runtime_1.jsx)(S_CBWrapper, { children: (0, jsx_runtime_1.jsx)(S_CBBox, __assign({ ref: ref, isInViewport: isInViewport, animationName: ani }, { children: children })) }));
+}
+var S_CBWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  perspective: 100px;\n  perspective-origin: center;\n  width: fit-content;\n"], ["\n  perspective: 100px;\n  perspective-origin: center;\n  width: fit-content;\n"])));
+var S_CBBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n\n  background-color: white;\n\n  height: 300px;\n  width: 300px;\n"], ["\n  ", ";\n\n  background-color: white;\n\n  height: 300px;\n  width: 300px;\n"])), function (_a) {
+    var isInViewport = _a.isInViewport, animationName = _a.animationName;
+    return isInViewport
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          -webkit-animation: ", " 1.2s linear both;\n          animation: ", " 1.2s linear both;\n        "], ["\n          -webkit-animation: ", " 1.2s linear both;\n          animation: ", " 1.2s linear both;\n        "])), animationName, animationName) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          visibility: hidden;\n        "], ["\n          visibility: hidden;\n        "])));
+});
+exports.default = ComponentBlock;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,54 @@
+"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);
+};
+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");
+require("react");
+var newUtils_1 = require("../../newUtils");
+var types_1 = require("../../types");
+var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
+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 Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
+var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
+var Youtube_1 = require("./componentBlocks/Youtube");
+function ComponentBlockMatcher(_a) {
+    var cbProps = _a.cbProps, device = _a.device, index = _a.index;
+    var componentBlockCode = cbProps.componentBlockCode, data = cbProps.jsonProperties.data;
+    var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(data) : data;
+    switch (componentBlockCode) {
+        case types_1.CB_ALL_CODES.CB_BTN:
+            return (0, jsx_runtime_1.jsx)(Button_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_TEXT:
+            return (0, jsx_runtime_1.jsx)(Text_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_RICHTEXT:
+            return (0, jsx_runtime_1.jsx)(RichText_1.RichText, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_DIVIDER:
+            return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_IMG:
+            return (0, jsx_runtime_1.jsx)(Image_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_TWITTER:
+            return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_YOUTUBE:
+            return (0, jsx_runtime_1.jsx)(Youtube_1.Youtube, __assign({}, propsWithValue, { index: index }));
+        case types_1.CB_ALL_CODES.CB_EMBED:
+            return (0, jsx_runtime_1.jsx)(Embed_1.default, __assign({}, propsWithValue, { index: index }));
+        default:
+            return (0, jsx_runtime_1.jsx)("div", { children: "Error: not supported CB" });
+    }
+}
+exports.default = ComponentBlockMatcher;

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 '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { CB_BTN_PROPERTIES_TYPE, IndexForIntersection } from '../../../../../../../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

@@ -0,0 +1,103 @@
+"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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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");
+/* 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 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 useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+function Button(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var index = props.index, CB_STYLE_PROP_BTNCOLOR = props.CB_STYLE_PROP_BTNCOLOR, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var _c = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
+        internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
+    }), onClickCLINK = _c.onClickCLINK, CLINKCursor = _c.CLINKCursor;
+    var _d = getBTNStyles(props.CB_STYLE_PROP_BTNTEXT, device), btnTextStyle = _d.style, btnTextHoverStyle = _d.hoverStyle;
+    var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
+    var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
+    var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromBtnCB)(props.CB_STYLE_PROP_BTNTEXT, device === 'MOBILE');
+    (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
+    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 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 } : {};
+    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,
+                    paddingBottom: paddingBottom,
+                    paddingTop: paddingTop
+                } }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ 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 = [
+        'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_WEIGHT',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_LINEHEIGHT',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_LETTERSPACING',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_COLOR',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_HORIZONTAL',
+        'CB_STYLE_PROP_BTNTEXT_SPEC_VERTICAL'
+    ];
+    return (0, newUtils_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'BTNTEXT' });
+}
+function getBTNColorStyles(props, device) {
+    var availableSpecCodes = [
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ANGLE',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_COLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDCOLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_ENDLOC',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_GRADIENT',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTCOLOR',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_STARTLOC',
+        'CB_STYLE_PROP_BTNCOLOR_SPEC_TYPE'
+    ];
+    return (0, colorUtil_1.parseStyleColorToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, propKey: 'BTNCOLOR', device: device });
+}
+exports.default = Button;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,79 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var styled_components_1 = __importStar(require("styled-components"));
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+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");
+function Divider(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var index = props.index, 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 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 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 } : {};
+    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) }) })) }))] }));
+}
+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;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), __assign({}, normalStyle));
+}, function (_a) {
+    var hoverStyle = _a.hoverStyle;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign({}, hoverStyle));
+});
+exports.default = Divider;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,48 @@
+"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);
+};
+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 DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
+var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
+var constant_1 = require("./constant");
+var EmbedIframe_1 = __importDefault(require("./EmbedIframe"));
+var IframeDenied_1 = __importDefault(require("./IframeDenied"));
+function Embed(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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, index = props.index;
+    var CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE = props.CB_CONTENT_PROP_CODEBLOCK.CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, 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 cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var editModeStyle = mode === 'EDIT' ? { pointerEvents: 'none' } : {};
+    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 iframeDenied = constant_1.EMBED_DENIED_HOSTS.includes(window.location.hostname);
+    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({}, style), layout), effectCssProperties), editModeStyle), hoverStyle: hoverStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: iframeDenied ? ((0, jsx_runtime_1.jsx)(IframeDenied_1.default, {})) : ((0, jsx_runtime_1.jsx)(EmbedIframe_1.default, { embedCode: CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE, style: layout })) })) })));
+}
+exports.default = Embed;

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

@@ -0,0 +1,45 @@
+"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_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var EmbedIframe = function (_a) {
+    var embedCode = _a.embedCode, style = _a.style;
+    var iframeRef = (0, react_1.useRef)(null);
+    var embedHtml = (0, react_1.useMemo)(function () {
+        return getHtmlCode(embedCode, style);
+    }, [embedCode, style]);
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        if (!iframeRef.current) {
+            return;
+        }
+        var iframeDoc = iframeRef.current.contentDocument || ((_a = iframeRef.current.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+        if (!iframeDoc || !embedHtml) {
+            return;
+        }
+        iframeDoc.open();
+        iframeDoc.write(embedHtml);
+        iframeDoc.close();
+    }, [embedHtml]);
+    return ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: "cb-embed", allow: "accelerometer; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; clipboard-write;", sandbox: "allow-forms allow-modals allow-same-origin allow-popups allow-presentation allow-scripts allow-downloads allow-pointer-lock" }));
+};
+var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  display: block;\n  height: 100%;\n  width: 100%;\n"])));
+function getHtmlCode(code, style) {
+    var styleString = Object.entries(style).reduce(function (styleStr, _a) {
+        var prop = _a[0], value = _a[1];
+        var kebabProp = prop.replace(/([a-z0])([A-Z])/g, '$1-$2').toLowerCase();
+        return "".concat(styleStr).concat(kebabProp, ": ").concat(value, ";");
+    }, '');
+    var html = "\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <base href=\"https://example.com/\">\n        <meta charset=\"UTF-8\">\n        <style>\n            html, body {\n                margin: 0;\n                padding: 0;\n                width: 100%;\n                height: 100%;\n                ".concat(styleString, "\n            }\n\n            body > div { \n            flex-grow: 1;\n            width: 100%;\n          }\n        </style>\n    </head>\n    <body>\n        ").concat(code, "\n    </body>\n    </html>\n    ");
+    return html;
+}
+exports.default = EmbedIframe;
+var templateObject_1;

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

@@ -0,0 +1,21 @@
+"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");
+require("react");
+var react_i18next_1 = require("react-i18next");
+var components_1 = require("../../../../../../../DynamicLayout/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+function IframeDenied() {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsx)(S_Denied, { children: (0, jsx_runtime_1.jsx)(components_1.D_TextLabel, { text: t('str_key_user_scene_x00001pages_notconnectdomain_embedcb_hide_info'), styleTheme: "caption1Regular", colorTheme: "sysTextSecondary", textAlign: "center" }) }));
+}
+var S_Denied = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"], ["\n  align-items: center;\n  background-color: #dddddd;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  width: 100%;\n"])));
+exports.default = IframeDenied;
+var templateObject_1;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EMBED_DENIED_HOSTS = void 0;
+exports.EMBED_DENIED_HOSTS = [
+    'app.publr.co',
+    'app.local.publr.co',
+    'app.dev.publr.co',
+    'app.qa.publr.co'
+];

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

@@ -1,4 +1,4 @@
-import type { DefaultBrightTheme } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { DefaultBrightTheme } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 export type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
 export type CB_TWITTER_STYLE_PROPS = {
     CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,140 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 DynamicLayout_1 = require("../../../../../../../DynamicLayout");
+var styled_components_1 = __importStar(require("styled-components"));
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../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");
+var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
+function Image(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var index = props.index, CB_CONTENT_PROP_IMAGE = props.CB_CONTENT_PROP_IMAGE, _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_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
+    var _c = (0, useCLINK_1.default)({
+        src: CB_CONTENT_PROP_CLINK_SPEC_SRC,
+        type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
+        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 _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);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
+        index
+    ]);
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    var isNoneEffectType = device === 'DESKTOP'
+        ? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
+        : CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
+    var hasEffect = !isNoneEffectType;
+    var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
+    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%' } }) })) })) })) }))] }));
+}
+function parseImageCBStyle(style, hoverStyle, mode) {
+    var boxStyle = {
+        normal: {
+            borderBottomRightRadius: style.borderBottomRightRadius,
+            borderBottomLeftRadius: style.borderBottomLeftRadius,
+            borderTopLeftRadius: style.borderTopLeftRadius,
+            borderTopRightRadius: style.borderTopRightRadius,
+            borderColor: style.borderColor,
+            borderStyle: style.borderStyle,
+            borderWidth: style.borderWidth,
+            visibility: mode === 'EDIT' ? 'visible' : style.visibility,
+            opacity: style.opacity,
+            boxShadow: style.boxShadow
+        },
+        hover: {
+            borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
+            borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
+            borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
+            borderTopRightRadius: hoverStyle.borderTopRightRadius,
+            borderColor: hoverStyle.borderColor,
+            borderStyle: hoverStyle.borderStyle,
+            borderWidth: hoverStyle.borderWidth,
+            visibility: mode === 'EDIT' ? 'visible' : hoverStyle.visibility,
+            opacity: hoverStyle.opacity,
+            boxShadow: hoverStyle.boxShadow
+        }
+    };
+    var imgStyle = {
+        normal: {
+            backgroundPosition: style.backgroundPosition,
+            backgroundSize: style.backgroundSize
+        },
+        hover: {
+            backgroundPosition: hoverStyle.backgroundPosition,
+            backgroundSize: hoverStyle.backgroundSize
+        }
+    };
+    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 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 }));
+}, 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 }));
+}, 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');
+}, 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');
+});
+exports.default = Image;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,4 +1,4 @@
-import type { ENUM_STRING, STRING_PLAIN } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+import type { ENUM_STRING, STRING_PLAIN } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
 export type ImagePropsKeys = keyof CB_IMAGE_STYLE_PROPS;
 export type CB_IMAGE_STYLE_PROPS = {
     CB_STYLE_PROP_IMAGE_SPEC_FIT: STRING_PLAIN;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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