pds-dev-kit-web-test 0.2.15 → 0.2.16

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

@@ -1,3 +1,9 @@
 /// <reference types="react" />
 import type { ComponentBlock } from '../../types';
-export default function ComponentBlockMatcher(props: ComponentBlock): JSX.Element;
+import type { Device } from '../../util/types';
+declare type Props = {
+    cbProps: ComponentBlock;
+    device: Device;
+};
+export default function ComponentBlockMatcher({ cbProps, device }: Props): JSX.Element;
+export {};

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

@@ -15,10 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @typescript-eslint/no-unused-vars */
 var newUtils_1 = require("../../newUtils");
 var types_1 = require("../../types");
-require("../../util");
 var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
 var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
 var Image_1 = __importDefault(require("./componentBlocks/Image/Image"));
@@ -26,9 +24,9 @@ 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(props) {
-    var device = 'MOBILE';
-    var id = props.id, type = props.type, availablePlugins = props.availablePlugins, queryableTapSrc = props.queryableTapSrc, queryableDefinitionPreset = props.queryableDefinitionPreset, dynamicLayoutSectionId = props.dynamicLayoutSectionId, componentBlockCode = props.componentBlockCode, properties = props.properties;
+function ComponentBlockMatcher(_a) {
+    var cbProps = _a.cbProps, device = _a.device;
+    var componentBlockCode = cbProps.componentBlockCode, properties = cbProps.properties;
     var propsWithValue = device === 'MOBILE' ? (0, newUtils_1.replaceUndefinedValues)(properties) : properties;
     switch (componentBlockCode) {
         case types_1.CB_ALL_CODES.CB_BTN:

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

@@ -65,7 +65,7 @@ function Image(props) {
             return;
         onClickBox();
     };
-    return ((0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), wrapperStyle), hoverStyle: hoverWrapperStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: handleOnClick }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ normalStyle: componentStyle, hoverStyle: hoverComponentStyle }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: { objectFit: hoverComponentStyle.objectFit } }, void 0) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign({}, layout), effectCssProperties), wrapperStyle), hoverStyle: hoverWrapperStyle, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, ref: cbRef, onClick: handleOnClick }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ normalStyle: componentStyle, hoverStyle: hoverComponentStyle }, { children: (0, jsx_runtime_1.jsx)(S_Image, { src: CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR, normalStyle: { objectFit: componentStyle.objectFit } }, void 0) }), void 0) }), void 0));
 }
 function imageStyleDivideProvider(style) {
     return {
@@ -84,7 +84,7 @@ function imageStyleDivideProvider(style) {
             borderTopRightRadius: style.borderTopRightRadius,
             borderWidth: style.borderWidth,
             boxShadow: style.boxShadow,
-            opacity: Number(style.opacity) / 100,
+            opacity: style.opacity,
             visibility: style.visibility
         }
     };

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

@@ -41,8 +41,11 @@ function Text(props) {
     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 isOnClickUsable = CB_CONTENT_PROP_CLINK_SPEC_TYPE !== 'DISABLED' &&
+        mode !== 'EDIT' &&
+        CB_CONTENT_PROP_CLINK_SPEC_SRC.length > 0;
     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({}, textStyle), propsStyle), layoutStyle), effectCssProperties), hoverStyle: __assign(__assign({}, textHoverStyle), propsHoverStyle), onClick: mode !== 'EDIT' ? onClickBox : undefined, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
+    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(__assign({}, textStyle), propsStyle), layoutStyle), effectCssProperties), { display: 'flex' }), hoverStyle: __assign(__assign(__assign({}, textHoverStyle), propsHoverStyle), { display: 'flex' }), onClick: isOnClickUsable ? onClickBox : undefined, ref: cbRef }, { children: props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT }), void 0)] }, void 0));
 }
 function getTextStyles(props, device) {
     var availableSpecCodes = [
@@ -51,7 +54,9 @@ function getTextStyles(props, device) {
         'CB_STYLE_PROP_TEXT_SPEC_SIZE',
         'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT',
         'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING',
-        'CB_STYLE_PROP_TEXT_SPEC_COLOR'
+        'CB_STYLE_PROP_TEXT_SPEC_COLOR',
+        'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL',
+        'CB_STYLE_PROP_TEXT_SPEC_VERTICAL'
     ];
     return (0, textUtil_1.parseStyleTextToCSSProp)({ availableSpecCodes: availableSpecCodes, props: props, device: device, propKey: 'TEXT' });
 }

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

@@ -1,12 +1,16 @@
 import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
-export declare type TextPropsKeys = keyof CB_TEXT_STYLE_PROPS;
-export declare type CB_TEXT_STYLE_PROPS = {
+export declare type TextPropsKeys = keyof CB_STYLE_PROP_TEXT_SPECS;
+export declare type CB_STYLE_PROP_TEXT_SPECS_BASE = {
     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_HORIZONTAL: ENUM_STRING;
+    CB_STYLE_PROP_TEXT_SPEC_VERTICAL: ENUM_STRING;
+};
+export declare type CB_STYLE_PROP_TEXT_SPECS = CB_STYLE_PROP_TEXT_SPECS_BASE & {
     '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;
@@ -25,4 +29,10 @@ export declare type CB_TEXT_STYLE_PROPS = {
     '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;
+    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_HORIZONTAL:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:HOVER': ENUM_STRING;
+    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_TEXT_SPEC_VERTICAL:MOBILE:HOVER': ENUM_STRING | undefined;
 };

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

@@ -33,12 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 exports.S_CB_BoxWithShadow = void 0;
-var isNullOrUndefined_1 = __importDefault(require("../../../../../../../DynamicLayout/sections/CustomSection/util/isNullOrUndefined"));
 var styled_components_1 = __importStar(require("styled-components"));
 exports.S_CB_BoxWithShadow = 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  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\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  &:before {\n    border-bottom-left-radius: ", "px;\n    border-bottom-right-radius: ", "px;\n    border-top-left-radius: ", "px;\n    border-top-right-radius: ", "px;\n    box-shadow: ", ";\n    content: '';\n    height: 100%;\n    left: 0;\n    opacity: ", ";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover {\n    ", ";\n\n    &:before {\n      border-bottom-left-radius: ", "px;\n      border-bottom-right-radius: ", "px;\n      border-top-left-radius: ", "px;\n      border-top-right-radius: ", "px;\n      box-shadow: ", ";\n      content: '';\n      height: 100%;\n      left: 0;\n      opacity: ", ";\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 100%;\n    }\n  }\n"])), function (_a) {
     var normalStyle = _a.normalStyle;
@@ -62,11 +58,9 @@ exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 ||
     var cbStylePropsShadowSpecs = _a.cbStylePropsShadowSpecs, device = _a.device;
     switch (device) {
         case 'DESKTOP':
-            return cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY / 100;
+            return Number(cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY) / 100;
         case 'MOBILE':
-            return (0, isNullOrUndefined_1.default)(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE'])
-                ? cbStylePropsShadowSpecs.CB_STYLE_PROP_SHADOW_SPEC_OPACITY / 100
-                : Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE']) / 100;
+            return Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE']) / 100;
     }
 }, function (_a) {
     var hoverStyle = _a.hoverStyle;
@@ -92,10 +86,8 @@ exports.S_CB_BoxWithShadow = styled_components_1.default.div(templateObject_3 ||
         case 'DESKTOP':
             return cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER'] / 100;
         case 'MOBILE':
-            return (0, isNullOrUndefined_1.default)(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER'])
-                ? cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:HOVER'] / 100
-                : Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER']) /
-                    100;
+            return (Number(cbStylePropsShadowSpecs['CB_STYLE_PROP_SHADOW_SPEC_OPACITY:MOBILE:HOVER']) /
+                100);
     }
 });
 var templateObject_1, templateObject_2, templateObject_3;

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

@@ -8,6 +8,9 @@ function useCLINK(props) {
     var navigationHandler = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).navigationHandler;
     var navType = type === 'INTERNAL' ? 'INTERNAL_LINK' : 'WEB_LINK';
     function onClickCLINK() {
+        if (!src) {
+            return;
+        }
         // NOTE: EDIT 모드에서는 작동 안해야함. cursor..?
         if (openNewTab) {
             window.open(src, '_blank', 'noopener');

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

@@ -8,7 +8,7 @@ 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_TYPE: 'INTERNAL' | 'EXTERNAL' | 'DISABLED';
     CB_CONTENT_PROP_CLINK_SPEC_SRC: STRING_PLAIN;
     CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: boolean;
 };

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

@@ -15,15 +15,18 @@ exports.getLinearGradientStyles = exports.getBtnColorStyles = exports.parseStyle
 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 _a, _b, _c;
         var stringifiedKey = currentKey.toString();
         var baseKey = device === 'DESKTOP' ? currentKey : stringifiedKey + ":MOBILE" || currentKey;
         var keyWithHover = baseKey.toString() + ":HOVER";
         var value = props[baseKey];
         var hoverValue = props[keyWithHover];
+        if (hoverValue === null || hoverValue === undefined) {
+            return { normal: __assign(__assign({}, acc.normal), (_a = {}, _a[currentKey] = value, _a)), hover: __assign({}, acc.hover) };
+        }
         return {
-            normal: __assign(__assign({}, acc.normal), (_a = {}, _a[currentKey] = value, _a)),
-            hover: __assign(__assign({}, acc.hover), (_b = {}, _b[currentKey] = hoverValue, _b))
+            normal: __assign(__assign({}, acc.normal), (_b = {}, _b[currentKey] = value, _b)),
+            hover: __assign(__assign({}, acc.hover), (_c = {}, _c[currentKey] = hoverValue, _c))
         };
     }, {
         normal: {},

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

@@ -19,7 +19,9 @@ function replaceUndefinedValues(jsonData) {
         var isIncludedPropKey = propKey.some(function (key) { return currentPropKey.includes(key); });
         if (isIncludedPropKey) {
             var specs = Object.keys(currentProps).reduce(function (accSpecs, curSpec) {
-                if (currentProps[curSpec] === undefined || currentProps[curSpec] === null) {
+                var isTargetNeedOverride = curSpec.endsWith(':MOBILE') &&
+                    (currentProps[curSpec] === undefined || currentProps[curSpec] === null);
+                if (isTargetNeedOverride) {
                     var undefinedMobileKey = curSpec.replace(':MOBILE', '');
                     if (undefinedMobileKey in currentProps) {
                         accSpecs[curSpec] = currentProps[undefinedMobileKey];
@@ -36,7 +38,3 @@ function replaceUndefinedValues(jsonData) {
     }, jsonData);
 }
 exports.default = replaceUndefinedValues;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function hasOwnProperty(obj, prop) {
-    return Object.prototype.hasOwnProperty.call(obj, prop);
-}

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

@@ -14,5 +14,5 @@ declare type ParseStyleTextProps<T> = {
     propKey: 'BTNTEXT';
     device: Device;
 };
-export declare function getTextCSSPropKey(key: string, cbName: 'TEXT' | 'BTNTEXT'): "" | "color" | "fontFamily" | "letterSpacing" | "lineHeight" | "fontSize" | "fontWeight";
+export declare function getTextCSSPropKey(key: string, cbName: 'TEXT' | 'BTNTEXT'): "" | "color" | "fontFamily" | "letterSpacing" | "lineHeight" | "fontSize" | "fontWeight" | "HORIZONTAL" | "alignItems";
 export {};

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

@@ -15,7 +15,7 @@ exports.getTextCSSPropKey = exports.parseStyleTextToCSSProp = void 0;
 function parseStyleTextToCSSProp(_a) {
     var availableSpecCodes = _a.availableSpecCodes, props = _a.props, propKey = _a.propKey, device = _a.device;
     return availableSpecCodes.reduce(function (acc, currentKey) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         var stringifiedKey = currentKey.toString();
         var keyWithDevice = device === 'DESKTOP' ? currentKey : stringifiedKey + ":MOBILE" || currentKey;
         var keyWithHover = keyWithDevice.toString() + ":HOVER";
@@ -25,34 +25,87 @@ function parseStyleTextToCSSProp(_a) {
         if (cssPropertyKey === 'lineHeight') {
             var numValue = typeof value === 'number' ? value / 100 : value;
             var numHoverValue = typeof hoverValue === 'number' ? hoverValue / 100 : hoverValue;
+            if (numHoverValue === null || numHoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = numValue, _a)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
             return {
-                style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = numValue, _a)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[cssPropertyKey] = numHoverValue, _b))
+                style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = numValue, _b)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_c = {}, _c[cssPropertyKey] = numHoverValue, _c))
             };
         }
         if (cssPropertyKey === 'fontFamily') {
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_d = {}, _d[cssPropertyKey] = getFontName(String(value)), _d)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
             return {
-                style: __assign(__assign({}, acc.style), (_c = {}, _c[cssPropertyKey] = getFontName(String(value)), _c)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[cssPropertyKey] = getFontName(String(hoverValue)), _d))
+                style: __assign(__assign({}, acc.style), (_e = {}, _e[cssPropertyKey] = getFontName(String(value)), _e)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[cssPropertyKey] = getFontName(String(hoverValue)), _f))
             };
         }
         if (cssPropertyKey === 'letterSpacing') {
-            var numValue = (Math.abs(+value) - 100) * (+value > 0 ? 0.01 : -0.01) + "em";
-            var numHoverValue = (Math.abs(+hoverValue) - 100) * (+hoverValue > 0 ? 0.01 : -0.01) + "em";
+            var numValue = Math.abs(+value) * (+value > 0 ? 0.01 : -0.01) + "em";
+            var numHoverValue = Math.abs(+hoverValue) * (+hoverValue > 0 ? 0.01 : -0.01) + "em";
+            if (numHoverValue === null || numHoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_g = {}, _g[cssPropertyKey] = numValue, _g)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
             return {
-                style: __assign(__assign({}, acc.style), (_e = {}, _e[cssPropertyKey] = numValue, _e)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_f = {}, _f[cssPropertyKey] = numHoverValue, _f))
+                style: __assign(__assign({}, acc.style), (_h = {}, _h[cssPropertyKey] = numValue, _h)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_j = {}, _j[cssPropertyKey] = numHoverValue, _j))
             };
         }
         if (cssPropertyKey === 'fontSize') {
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_k = {}, _k[cssPropertyKey] = value + "px", _k)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
             return {
-                style: __assign(__assign({}, acc.style), (_g = {}, _g[cssPropertyKey] = value + "px", _g)),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_h = {}, _h[cssPropertyKey] = hoverValue + "px", _h))
+                style: __assign(__assign({}, acc.style), (_l = {}, _l[cssPropertyKey] = value + "px", _l)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_m = {}, _m[cssPropertyKey] = hoverValue + "px", _m))
+            };
+        }
+        if (cssPropertyKey === 'HORIZONTAL') {
+            var horizontalObj = getHorizontalPositionValue(String(value));
+            var hoverHorizontalObj = getHorizontalPositionValue(String(hoverValue));
+            if (hoverHorizontalObj === null || hoverHorizontalObj === undefined) {
+                return { style: __assign(__assign({}, acc.style), horizontalObj), hoverStyle: __assign({}, acc.hoverStyle) };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), horizontalObj),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), hoverHorizontalObj)
+            };
+        }
+        if (cssPropertyKey === 'alignItems') {
+            if (hoverValue === null || hoverValue === undefined) {
+                return {
+                    style: __assign(__assign({}, acc.style), (_o = {}, _o[cssPropertyKey] = getVerticalPositionValue(String(value)), _o)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
+            return {
+                style: __assign(__assign({}, acc.style), (_p = {}, _p[cssPropertyKey] = getVerticalPositionValue(String(value)), _p)),
+                hoverStyle: __assign(__assign({}, acc.hoverStyle), (_q = {}, _q[cssPropertyKey] = getVerticalPositionValue(String(hoverValue)), _q))
+            };
+        }
+        if (hoverValue === null || hoverValue === undefined) {
+            return {
+                style: __assign(__assign({}, acc.style), (_r = {}, _r[cssPropertyKey] = value, _r)),
+                hoverStyle: __assign({}, acc.hoverStyle)
             };
         }
         return {
-            style: __assign(__assign({}, acc.style), (_j = {}, _j[cssPropertyKey] = value, _j)),
-            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_k = {}, _k[cssPropertyKey] = hoverValue, _k))
+            style: __assign(__assign({}, acc.style), (_s = {}, _s[cssPropertyKey] = value, _s)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_t = {}, _t[cssPropertyKey] = hoverValue, _t))
         };
     }, {
         style: {},
@@ -92,6 +145,16 @@ function getTextCSSPropKey(key, cbName) {
         case "CB_STYLE_PROP_" + cbName + "_SPEC_WEIGHT:MOBILE":
         case "CB_STYLE_PROP_" + cbName + "_SPEC_WEIGHT:MOBILE:HOVER":
             return 'fontWeight';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_HORIZONTAL:MOBILE:HOVER":
+            return 'HORIZONTAL';
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL:HOVER":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL:MOBILE":
+        case "CB_STYLE_PROP_" + cbName + "_SPEC_VERTICAL:MOBILE:HOVER":
+            return 'alignItems';
         default:
             return '';
     }
@@ -109,3 +172,25 @@ function getFontName(value) {
             return '';
     }
 }
+function getHorizontalPositionValue(value) {
+    switch (value) {
+        case 'LEFT':
+            return { justifyContent: 'flex-start', textAlign: 'left' };
+        case 'RIGHT':
+            return { justifyContent: 'flex-end', textAlign: 'right' };
+        case 'CENTER':
+        default:
+            return { justifyContent: 'center', textAlign: 'center' };
+    }
+}
+function getVerticalPositionValue(value) {
+    switch (value) {
+        case 'TOP':
+            return 'flex-start';
+        case 'BOTTOM':
+            return 'flex-end';
+        case 'CENTER':
+        default:
+            return 'center';
+    }
+}

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

@@ -14,7 +14,7 @@ export declare type NAMED_CB_LAYOUT_ARRANGE_PROPS = {
 };
 export default function parseLayoutPropArrange(namedProps: NAMED_CB_LAYOUT_ARRANGE_PROPS, device: Device): StyleType;
 declare type CB_LAYOUT_PROP_ARRANGE_ENUM_VERTICAL = 'TOP' | 'MIDDLE' | 'BOTTOM';
-declare type CB_LAYOUT_PROP_ARRANGE_ENUM_HORIZONTAL = 'LEFT' | 'CENTER' | 'RIGHT';
+declare type CB_LAYOUT_PROP_ARRANGE_ENUM_HORIZONTAL = 'START' | 'CENTER' | 'END';
 export declare type CB_LAYOUT_PROP_ARRANGE_SPECS = {
     [CB_LAYOUT_PROP_ARRANGE_BASE_KEYS.CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL]: CB_LAYOUT_PROP_ARRANGE_ENUM_VERTICAL;
     [CB_LAYOUT_PROP_ARRANGE_BASE_KEYS.CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL]: CB_LAYOUT_PROP_ARRANGE_ENUM_HORIZONTAL;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/layoutPropParsers/parseLayoutPropArrange.js

@@ -58,7 +58,7 @@ function getCssProperties(value) {
                 flexDirection: 'column',
                 justifyContent: 'flex-end'
             };
-        case 'LEFT':
+        case 'START':
             return {
                 display: 'flex',
                 flexDirection: 'column',
@@ -70,7 +70,7 @@ function getCssProperties(value) {
                 flexDirection: 'column',
                 alignItems: 'center'
             };
-        case 'RIGHT':
+        case 'END':
             return {
                 display: 'flex',
                 flexDirection: 'column',

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

@@ -0,0 +1,23 @@
+import type { Device } from '../types';
+declare type Padding = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+};
+export declare type SectionPadding = {
+    CB_LAYOUT_PROP_PADDING_SPEC_PADDING: Padding;
+    'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null | Padding;
+} | undefined | null;
+declare function parseSectionPadding(prop: SectionPadding, device: Device): {
+    top?: undefined;
+    left?: undefined;
+    bottom?: undefined;
+    right?: undefined;
+} | {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+export default parseSectionPadding;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/layoutPropParsers/parseSectionPadding.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function parseSectionPadding(prop, device) {
+    if (!prop) {
+        return {};
+    }
+    if (device === 'MOBILE') {
+        var padding_1 = prop['CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE'];
+        if (padding_1) {
+            return {
+                top: padding_1.top,
+                left: padding_1.left,
+                bottom: padding_1.bottom,
+                right: padding_1.right
+            };
+        }
+    }
+    var padding = prop.CB_LAYOUT_PROP_PADDING_SPEC_PADDING;
+    return {
+        top: padding.top,
+        left: padding.left,
+        bottom: padding.bottom,
+        right: padding.right
+    };
+}
+exports.default = parseSectionPadding;

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

@@ -1,6 +1,6 @@
 declare type Props = {
     isMobile: boolean;
-    customSectionProps?: {
+    customSectionProps: {
         CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH: boolean;
         'CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE': boolean | undefined;
         CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT: number;
@@ -12,9 +12,9 @@ declare type Props = {
     };
 };
 export declare function parseCustomSectionPlacement({ isMobile, customSectionProps }: Props): {
-    minHeight: number | undefined;
-    width: number | undefined;
-    rows: number | undefined;
-    isFullWidth: boolean | undefined;
+    minHeight: number;
+    width: number;
+    rows: number;
+    isFullWidth: boolean;
 };
 export default parseCustomSectionPlacement;

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

@@ -1,37 +1,24 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseCustomSectionPlacement = void 0;
-var isNullOrUndefined_1 = __importDefault(require("./isNullOrUndefined"));
 function parseCustomSectionPlacement(_a) {
+    var _b, _c, _d, _e;
     var isMobile = _a.isMobile, customSectionProps = _a.customSectionProps;
-    return customSectionProps
-        ? {
-            minHeight: isMobile &&
-                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE'])
-                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE']
-                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT,
-            width: isMobile &&
-                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE'])
-                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE']
-                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH,
-            rows: isMobile &&
-                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE'])
-                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE']
-                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS,
-            isFullWidth: isMobile &&
-                !(0, isNullOrUndefined_1.default)(customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE'])
-                ? customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE']
-                : customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH
-        }
-        : {
-            minHeight: 0,
-            width: 0,
-            rows: 0,
-            isFullWidth: true
+    var CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH = customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH, CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT = customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT, CB_PLACEMENT_PROP_SECTION_SPEC_ROWS = customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_ROWS, CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH = customSectionProps.CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH;
+    if (isMobile) {
+        return {
+            minHeight: (_b = customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE']) !== null && _b !== void 0 ? _b : CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT,
+            width: (_c = customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE']) !== null && _c !== void 0 ? _c : CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH,
+            rows: (_d = customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE']) !== null && _d !== void 0 ? _d : CB_PLACEMENT_PROP_SECTION_SPEC_ROWS,
+            isFullWidth: (_e = customSectionProps['CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE']) !== null && _e !== void 0 ? _e : CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH
         };
+    }
+    return {
+        minHeight: CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT,
+        width: CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH,
+        rows: CB_PLACEMENT_PROP_SECTION_SPEC_ROWS,
+        isFullWidth: CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH
+    };
 }
 exports.parseCustomSectionPlacement = parseCustomSectionPlacement;
 exports.default = parseCustomSectionPlacement;

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

@@ -1,3 +1,3 @@
-import type { Device, OverlayStyleAndOverlayHoverStyle, ParserResult } from './types';
+import type { Device, JsonPropertiesParserResult } from './types';
 import type { ISectionJsonProperties } from '../../../../DynamicLayout/types';
-export default function parseJsonProperties(properties: ISectionJsonProperties | undefined, device: Device): ParserResult & Partial<OverlayStyleAndOverlayHoverStyle>;
+export default function parseJsonProperties(properties: ISectionJsonProperties | undefined, device: Device): JsonPropertiesParserResult;

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

@@ -19,14 +19,11 @@ var layoutPropParsers_1 = require("./layoutPropParsers");
 var types_3 = require("./layoutPropParsers/types");
 var stylePropParsers_1 = require("./stylePropParsers");
 var types_4 = require("./stylePropParsers/types");
-// export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
 function parseJsonProperties(properties, device) {
     if (!properties) {
         return {
             style: {},
             overlayStyle: {},
-            overlayHoverStyle: {},
-            hoverStyle: {},
             layout: {},
             effect: {},
             content: {}
@@ -39,9 +36,9 @@ function parseJsonProperties(properties, device) {
             specs: specs
         };
         if (normalizedProperty.name in types_4.CB_STYLE_PROP_KEYS) {
-            var _a = (0, stylePropParsers_1.parseStyleProperties)(normalizedProperty, device), style = _a.style, hoverStyle = _a.hoverStyle, overlayStyle = _a.overlayStyle, overlayHoverStyle = _a.overlayHoverStyle;
+            var _a = (0, stylePropParsers_1.parseStyleProperties)(normalizedProperty, device), style = _a.style, overlayStyle = _a.overlayStyle;
             // console.log(normalizedProperty.name, ' >>>', overlayStyle, overlayHoverStyle);
-            return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style), hoverStyle: __assign(__assign({}, acc.hoverStyle), hoverStyle), overlayStyle: __assign(__assign({}, acc.overlayStyle), overlayStyle), overlayHoverStyle: __assign(__assign({}, acc.overlayHoverStyle), overlayHoverStyle) });
+            return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style), overlayStyle: __assign(__assign({}, acc.overlayStyle), overlayStyle) });
         }
         if (normalizedProperty.name in types_3.CB_LAYOUT_PROP_KEYS) {
             var style = (0, layoutPropParsers_1.parseLayoutProperties)(normalizedProperty, device).style;
@@ -62,8 +59,6 @@ function parseJsonProperties(properties, device) {
     }, {
         style: {},
         overlayStyle: {},
-        overlayHoverStyle: {},
-        hoverStyle: {},
         layout: {},
         effect: {},
         content: {}

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

@@ -1,3 +1,3 @@
 import { NamedStylePropType } from './types';
-import type { Device, OverlayStyleAndOverlayHoverStyle, StyleAndHoverStyle } from '../types';
-export declare function parseStyleProperties(normalizedProperty: NamedStylePropType, device: Device): StyleAndHoverStyle & Partial<OverlayStyleAndOverlayHoverStyle>;
+import type { Device, OverlayStyle, StyleAndHoverStyle } from '../types';
+export declare function parseStyleProperties(normalizedProperty: NamedStylePropType, device: Device): StyleAndHoverStyle & Partial<OverlayStyle>;

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

@@ -35,7 +35,7 @@ function parseStyleProperties(normalizedProperty, device) {
         case types_1.CB_STYLE_PROP_KEYS.CB_STYLE_PROP_BGOVERLAY:
             return (0, parseStylePropBgOverlay_1.default)(normalizedProperty, device);
         default:
-            return { style: {}, hoverStyle: {}, overlayStyle: {}, overlayHoverStyle: {} };
+            return { style: {}, hoverStyle: {}, overlayStyle: {} };
     }
 }
 exports.parseStyleProperties = parseStyleProperties;