pds-dev-kit-web-test 0.2.2 → 0.2.4

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

@@ -0,0 +1,28 @@
+import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+export declare type TextPropsKeys = keyof CB_TEXT_STYLE_PROPS;
+export declare type CB_TEXT_STYLE_PROPS = {
+    CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: ENUM_STRING;
+    CB_STYLE_PROP_TEXT_SPEC_WEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_SIZE: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING: NUMBER_INTEGER;
+    CB_STYLE_PROP_TEXT_SPEC_COLOR: STRING_8DIGIT_HEX;
+    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER': NUMBER_INTEGER | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | undefined;
+};

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CB_TWITTER_PROPERTIES_TYPE } from '../../../../util/types';
+declare type Props = CB_TWITTER_PROPERTIES_TYPE;
+declare function Twitter(props: Props): JSX.Element;
+export default Twitter;

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

@@ -0,0 +1,43 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var DynamicLayout_1 = require("@sub/DynamicLayout");
+var ComponentBlocks_1 = require("@sub/DynamicLayout/components/ComponentBlocks");
+var hooks_1 = require("../../../../hooks");
+var util_1 = require("../../../../util");
+var S_CB_Box_1 = require("../components/S_CB_Box");
+function Twitter(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_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;
+    var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
+    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) {
+        delete layout.display;
+    }
+    if ('alignItems' in layout) {
+        delete layout.alignItems;
+    }
+    if ('justifyContent' in layout) {
+        delete layout.justifyContent;
+    }
+    var cbRef = (0, react_1.useRef)(null);
+    var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 1, freezeOnceVisible: true });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, style), layout), effectCssProperties), { overflowY: 'auto' }), hoverStyle: hoverStyle, ref: cbRef }, { children: (0, jsx_runtime_1.jsx)(ComponentBlocks_1.TwitterTimeline, { userId: userId, theme: theme }, void 0) }), void 0) }, void 0));
+}
+exports.default = Twitter;

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

@@ -0,0 +1,6 @@
+import type { DefaultBrightTheme } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+export declare type TwitterPropsKeys = keyof CB_TWITTER_STYLE_PROPS;
+export declare type CB_TWITTER_STYLE_PROPS = {
+    CB_STYLE_PROP_TWITTER_SPEC_THEME: DefaultBrightTheme;
+    'CB_STYLE_PROP_TWITTER_SPEC_THEME:MOBILE': DefaultBrightTheme | undefined;
+};

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

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

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

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

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

@@ -0,0 +1,69 @@
+"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 DynamicLayout_1 = require("@sub/DynamicLayout");
+var hooks_1 = require("@sub/DynamicLayout/sections/CustomSection/hooks");
+var colorUtil_1 = require("@sub/DynamicLayout/sections/CustomSection/newUtils/colorUtil");
+var util_1 = require("@sub/DynamicLayout/sections/CustomSection/util");
+var styled_components_1 = __importDefault(require("styled-components"));
+var S_CB_Box_1 = require("../components/S_CB_Box");
+var S_HiddenCover_1 = require("../components/S_HiddenCover");
+var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
+function Youtube(props) {
+    var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR;
+    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 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: 1, freezeOnceVisible: true });
+    var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
+    var effectCssProperties = isVisible ? effect : {};
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}, void 0), (0, jsx_runtime_1.jsx)(S_CB_Box_1.S_CB_Box, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), ref: cbRef }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}, void 0), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(S_Iframe, { title: id, src: youtubeSrc, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" }, void 0)) }), void 0)] }, void 0));
+}
+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_ThumbnailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n"])));
+var S_Thumbnail = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
+var S_Iframe = styled_components_1.default.iframe(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: none;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  height: 100%;\n  width: 100%;\n"])));
+var S_YoutubeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 48px;\n  margin: auto;\n  position: absolute;\n  width: 68px;\n"], ["\n  height: 48px;\n  margin: auto;\n  position: absolute;\n  width: 68px;\n"])));
+function YoutubeButton() {
+    return ((0, jsx_runtime_1.jsx)(S_YoutubeButton, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ height: "100%", version: "1.1", viewBox: "0 0 68 48", width: "100%" }, { children: [(0, jsx_runtime_1.jsx)("path", { className: "ytp-large-play-button-bg", d: "M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z", fill: "#f00" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M 45,24 27,14 27,34", fill: "#fff" }, void 0)] }), void 0) }, void 0));
+}
+exports.default = Youtube;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/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.Youtube = void 0;
+var Youtube_1 = require("./Youtube");
+Object.defineProperty(exports, "Youtube", { enumerable: true, get: function () { return __importDefault(Youtube_1).default; } });

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

@@ -0,0 +1,7 @@
+import type { CB_CONTENT_PROP_YOUTUBE_TYPE } from './types';
+declare function parseYoutubeContentProp(props: CB_CONTENT_PROP_YOUTUBE_TYPE): {
+    id: string;
+    youtubeSrc: string;
+    thumbnailSrc: string;
+};
+export default parseYoutubeContentProp;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function parseYoutubeContentProp(props) {
+    var id = getYoutubeId(props.CB_CONTENT_PROP_YOUTUBE_SPEC_SRC);
+    var start = props.CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME;
+    var end = props.CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME;
+    if (!id) {
+        return {
+            id: 'no-id',
+            youtubeSrc: '',
+            thumbnailSrc: ''
+        };
+    }
+    return {
+        id: id,
+        youtubeSrc: getEmbedUrl(id, start, end),
+        thumbnailSrc: getThumbnailUrl(id)
+    };
+}
+function getYoutubeId(src) {
+    var _a;
+    var embedUrl = src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/);
+    var shareUrl = src.match(/youtu.be\/(.{11})/);
+    var shortsUrl = src.match(/youtube\.com\/shorts\/(.{11})/);
+    return (_a = (embedUrl || shareUrl || shortsUrl)) === null || _a === void 0 ? void 0 : _a.pop();
+}
+function getThumbnailUrl(id) {
+    return "https://img.youtube.com/vi/" + id + "/0.jpg";
+}
+function getEmbedUrl(id, start, end) {
+    return "https://www.youtube.com/embed/" + id + "?start=" + start + "&end=" + end;
+}
+exports.default = parseYoutubeContentProp;

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

@@ -0,0 +1,48 @@
+import type { ENUM_STRING, NUMBER_INTEGER } from '@sub/DynamicLayout/sections/CustomSection/util/types';
+export declare type CB_CONTENT_PROP_YOUTUBE_TYPE = {
+    CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: number;
+    CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: boolean;
+    CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: boolean;
+    CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: string;
+    CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: number;
+};
+export declare type CB_STYLE_PROP_BGCOLOR_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
+export declare type CB_STYLE_PROP_BGCOLOR_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
+export declare type CB_STYLE_PROP_BGCOLOR_SPECS_BASE = {
+    CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE: NUMBER_INTEGER;
+    CB_STYLE_PROP_BGCOLOR_SPEC_COLOR: ENUM_STRING;
+    CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR: ENUM_STRING;
+    CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC: NUMBER_INTEGER;
+    CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT: ENUM_STRING;
+    CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR: ENUM_STRING;
+    CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC: NUMBER_INTEGER;
+    CB_STYLE_PROP_BGCOLOR_SPEC_TYPE: ENUM_STRING;
+};
+export declare type CB_STYLE_PROP_BGCOLOR_SPECS = CB_STYLE_PROP_BGCOLOR_SPECS_BASE & {
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE': NUMBER_INTEGER | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE:HOVER': NUMBER_INTEGER | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE:HOVER': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE': NUMBER_INTEGER | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE:HOVER': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:HOVER': NUMBER_INTEGER;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE': NUMBER_INTEGER | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE': ENUM_STRING | undefined | null;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': ENUM_STRING | undefined | null;
+};
+export declare type BGColorPropsKeys = keyof CB_STYLE_PROP_BGCOLOR_SPECS;
+export declare type BGColorValueSetType = Partial<Record<keyof CB_STYLE_PROP_BGCOLOR_SPECS, NUMBER_INTEGER | ENUM_STRING | undefined>>;

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

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

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

@@ -0,0 +1,2 @@
+import type { StylesProps } from '../types';
+export declare const S_CB_Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StylesProps, never>;

package/dist/src/sub/DynamicLayout/sections/CustomSection/{BlockMatcher/blocks/Button.js → components/ComponentBlock/componentBlocks/components/S_CB_Box.js}

@@ -34,18 +34,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
+exports.S_CB_Box = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-function Button(_a) {
-    var text = _a.text, style = _a.style, hoverStyle = _a.hoverStyle;
-    return ((0, jsx_runtime_1.jsx)(S_Button, __assign({ hoverStyle: hoverStyle, compoStyle: style, type: "button" }, { children: text }), void 0));
-}
-var S_Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  all: unset;\n  height: 100%;\n  text-align: center;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    transition: all 0.15s ease-out;\n    ", ";\n  }\n"], ["\n  all: unset;\n  height: 100%;\n  text-align: center;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    transition: all 0.15s ease-out;\n    ", ";\n  }\n"])), function (_a) {
-    var compoStyle = _a.compoStyle;
-    return compoStyle && (0, styled_components_1.css)(__assign({}, compoStyle));
+exports.S_CB_Box = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  ", ";\n\n  &:hover {\n    ", ";\n  }\n"], ["\n  /*\n     Introduced in IE 10.\n     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/\n   */\n\n  height: 100%;\n  overflow: hidden;\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 hoverStyle && (0, styled_components_1.css)(__assign({}, hoverStyle));
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), __assign({}, hoverStyle));
 });
-exports.default = Button;
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1 @@
+export declare const S_HiddenCover: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,13 @@
+"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 });
+exports.S_HiddenCover = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.S_HiddenCover = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -60deg,\n    #ffffff26,\n    #ffffff26 12px,\n    #0000001a 12px,\n    #0000001a 25px\n  );\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n"], ["\n  background: repeating-linear-gradient(\n    -60deg,\n    #ffffff26,\n    #ffffff26 12px,\n    #0000001a 12px,\n    #0000001a 25px\n  );\n  height: 100%;\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n"])));
+var templateObject_1;

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

@@ -0,0 +1,8 @@
+import type { CB_CONTENT_PROP_CLINK } from '../types';
+declare type Props = {
+    src: string;
+    openNewTab: boolean;
+    type: CB_CONTENT_PROP_CLINK['CB_CONTENT_PROP_CLINK_SPEC_TYPE'];
+};
+export default function useCLINK(props: Props): () => void;
+export {};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var dynamicLayoutContext_1 = require("@sub/DynamicLayout/dynamicLayoutContext");
+// NOTE: link기능은 탄력적일 필요가 없음.
+function useCLINK(props) {
+    var src = props.src, openNewTab = props.openNewTab, type = props.type;
+    var navigationHandler = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).navigationHandler;
+    var navType = type === 'INTERNAL' ? 'INTERNAL_LINK' : 'WEB_LINK';
+    function onClickCLINK() {
+        // NOTE: EDIT 모드에서는 작동 안해야함. cursor..?
+        if (openNewTab) {
+            window.open(src, '_blank', 'noopener');
+            return;
+        }
+        if (typeof navigationHandler === 'function') {
+            navigationHandler(navType, src);
+            return;
+        }
+        // NOTE: error or do other action.
+    }
+    return onClickCLINK;
+}
+exports.default = useCLINK;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { STRING_PLAIN } from '../../../util/types';
+export declare type StylesProps = {
+    normalStyle: React.CSSProperties;
+    hoverStyle: React.CSSProperties;
+};
+export declare type CB_CONTENT_PROP_TEXT = {
+    CB_CONTENT_PROP_TEXT_SPEC_TEXT: STRING_PLAIN;
+};
+export declare type CB_CONTENT_PROP_CLINK = {
+    CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'INTERNAL' | 'EXTERNAL';
+    CB_CONTENT_PROP_CLINK_SPEC_SRC: STRING_PLAIN;
+    CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
+};
+export declare type CB_CONTENT_PROP_IMAGE = {
+    CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR: STRING_PLAIN;
+};
+export declare type CB_CONTENT_PROP_TWITTER = {
+    CB_CONTENT_PROP_TWITTER_SPEC_SRC: STRING_PLAIN;
+};

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

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

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

@@ -0,0 +1,18 @@
+// import React from 'react';
+// import type { CB_CONTENT_PROP_CLINK } from '../types';
+// import type { Link } from 'react-router-dom';
+// function CLINKhandler({
+//   src,
+//   openNewTab,
+//   type
+// }: {
+//   src: string;
+//   openNewTab: boolean;
+//   type: CB_CONTENT_PROP_CLINK['CB_CONTENT_PROP_CLINK_SPEC_TYPE'];
+// }) {
+//   function onClickCLINK() {
+//     <Link />
+//   }
+//   return;
+// }
+// export default CLINKhandler;

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

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

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/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.ComponentBlock = void 0;
+var ComponentBlock_1 = require("./ComponentBlock");
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return __importDefault(ComponentBlock_1).default; } });

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

@@ -0,0 +1 @@
+export { ComponentBlock } from './ComponentBlock';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentBlock = void 0;
+var ComponentBlock_1 = require("./ComponentBlock");
+Object.defineProperty(exports, "ComponentBlock", { enumerable: true, get: function () { return ComponentBlock_1.ComponentBlock; } });

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

@@ -0,0 +1 @@
+export { useIntersectionObserver } from './useIntersectionObserver';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionObserver = void 0;
+var useIntersectionObserver_1 = require("./useIntersectionObserver");
+Object.defineProperty(exports, "useIntersectionObserver", { enumerable: true, get: function () { return useIntersectionObserver_1.useIntersectionObserver; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+interface Args extends IntersectionObserverInit {
+    freezeOnceVisible?: boolean;
+}
+export declare function useIntersectionObserver(elementRef: RefObject<Element>, { threshold, root, rootMargin, freezeOnceVisible }: Args): IntersectionObserverEntry | undefined;
+export {};

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionObserver = void 0;
+var react_1 = require("react");
+function useIntersectionObserver(elementRef, _a) {
+    var _b = _a.threshold, threshold = _b === void 0 ? 0 : _b, _c = _a.root, root = _c === void 0 ? null : _c, _d = _a.rootMargin, rootMargin = _d === void 0 ? '0%' : _d, _e = _a.freezeOnceVisible, freezeOnceVisible = _e === void 0 ? false : _e;
+    var _f = (0, react_1.useState)(), entry = _f[0], setEntry = _f[1];
+    var frozen = (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) && freezeOnceVisible;
+    var updateEntry = function (_a) {
+        var entry = _a[0];
+        setEntry(entry);
+    };
+    (0, react_1.useEffect)(function () {
+        var node = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current; // DOM Ref
+        var hasIOSupport = !!window.IntersectionObserver;
+        if (!hasIOSupport || frozen || !node)
+            return;
+        var observerParams = { threshold: threshold, root: root, rootMargin: rootMargin };
+        var observer = new IntersectionObserver(updateEntry, observerParams);
+        observer.observe(node);
+        return function () { return observer.disconnect(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, JSON.stringify(threshold), root, rootMargin, frozen]);
+    return entry;
+}
+exports.useIntersectionObserver = useIntersectionObserver;

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

@@ -1,2 +1 @@
 export { default as CustomSection } from './CustomSection';
-export type { BlockNames, BlockId } from './types';

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

@@ -0,0 +1,31 @@
+import type { BTNColorValueSetType } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
+import type { BGOverlayValueSetType } from '../components/ComponentBlock/componentBlocks/RichText/types';
+import type { BGColorValueSetType } from '../components/ComponentBlock/componentBlocks/Youtube/types';
+import type { Device } from '../util/types';
+import type { CSSProperties } from 'react';
+declare type CBName = 'BTNCOLOR' | 'BGCOLOR' | 'BGOVERLAY';
+declare type ExtractPropKey<T extends CBName> = Extract<T, CBName>;
+declare type ValueSetType = BTNColorValueSetType & BGColorValueSetType & BGOverlayValueSetType;
+export declare type ParseStyleColorProps<T> = {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: ExtractPropKey<'BTNCOLOR'>;
+    device: Device;
+} | {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: ExtractPropKey<'BGCOLOR'>;
+    device: Device;
+} | {
+    availableSpecCodes: Array<keyof T>;
+    props: T;
+    propKey: ExtractPropKey<'BGOVERLAY'>;
+    device: Device;
+};
+export declare function parseStyleColorToCSSProp<T>({ availableSpecCodes, props, propKey, device }: ParseStyleColorProps<T>): {
+    style: CSSProperties;
+    hoverStyle: CSSProperties;
+};
+export declare function getBtnColorStyles(value: ValueSetType, cbName: CBName): CSSProperties;
+export declare function getLinearGradientStyles(value: ValueSetType, cbName: CBName): CSSProperties;
+export {};

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

@@ -0,0 +1,66 @@
+"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 });
+exports.getLinearGradientStyles = exports.getBtnColorStyles = exports.parseStyleColorToCSSProp = void 0;
+function parseStyleColorToCSSProp(_a) {
+    var availableSpecCodes = _a.availableSpecCodes, props = _a.props, propKey = _a.propKey, device = _a.device;
+    var valueSet = availableSpecCodes.reduce(function (acc, currentKey) {
+        var _a, _b;
+        var stringifiedKey = currentKey.toString();
+        var baseKey = device === 'DESKTOP' ? currentKey : stringifiedKey + ":MOBILE";
+        var keyWithHover = baseKey.toString() + ":HOVER";
+        var value = props[baseKey];
+        var hoverValue = props[keyWithHover];
+        return {
+            normal: __assign(__assign({}, acc.normal), (_a = {}, _a[currentKey] = value, _a)),
+            hover: __assign(__assign({}, acc.hover), (_b = {}, _b[currentKey] = hoverValue, _b))
+        };
+    }, {
+        normal: {},
+        hover: {}
+    });
+    var style = getBtnColorStyles(valueSet.normal, propKey);
+    var hoverStyle = getBtnColorStyles(valueSet.hover, propKey);
+    return { style: style, hoverStyle: hoverStyle };
+}
+exports.parseStyleColorToCSSProp = parseStyleColorToCSSProp;
+function getBtnColorStyles(value, cbName) {
+    if ("" + value["CB_STYLE_PROP_" + cbName + "_SPEC_TYPE"] === 'NONE' ||
+        value["CB_STYLE_PROP_" + cbName + "_SPEC_TYPE"] === 'SOLID') {
+        var style = {
+            backgroundColor: value["CB_STYLE_PROP_" + cbName + "_SPEC_COLOR"]
+        };
+        return style;
+    }
+    return getLinearGradientStyles(value, cbName);
+}
+exports.getBtnColorStyles = getBtnColorStyles;
+function getLinearGradientStyles(value, cbName) {
+    var angle = value["CB_STYLE_PROP_" + cbName + "_SPEC_ANGLE"];
+    var startColor = value["CB_STYLE_PROP_" + cbName + "_SPEC_STARTCOLOR"];
+    var startLoc = value["CB_STYLE_PROP_" + cbName + "_SPEC_STARTLOC"];
+    var endColor = value["CB_STYLE_PROP_" + cbName + "_SPEC_ENDCOLOR"];
+    var endLoc = value["CB_STYLE_PROP_" + cbName + "_SPEC_ENDLOC"];
+    if (value["CB_STYLE_PROP_" + cbName + "_SPEC_GRADIENT"] === 'LINEAR') {
+        var gradient = angle + "deg, " + startColor + " " + startLoc + "%, " + endColor + " " + endLoc + "%";
+        var style = { background: "linear-gradient(" + gradient + ")" };
+        return style;
+    }
+    if (value["CB_STYLE_PROP_" + cbName + "_SPEC_GRADIENT"] === 'RADIAL') {
+        var gradient = startColor + " " + startLoc + "%, " + endColor + " " + endLoc + "%";
+        var style = { background: "radial-gradient(" + gradient + ")" };
+        return style;
+    }
+    return {};
+}
+exports.getLinearGradientStyles = getLinearGradientStyles;

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

@@ -0,0 +1,2 @@
+export { parseStyleTextToCSSProp } from './textUtil';
+export { default as replaceUndefinedValues } from './replaceUndefinedValues';

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

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

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

@@ -0,0 +1,2 @@
+import type { AllCBProperties } from '../types';
+export default function replaceUndefinedValues(jsonData: AllCBProperties): AllCBProperties;