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

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,27 @@ 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':
+            return { justifyContent: 'center', textAlign: 'center' };
+        default:
+            return {};
+    }
+}
+function getVerticalPositionValue(value) {
+    switch (value) {
+        case 'TOP':
+            return 'flex-start';
+        case 'BOTTOM':
+            return 'flex-end';
+        case 'MIDDLE':
+            return 'center';
+        default:
+            return '';
+    }
+}

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,20 +1,20 @@
 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_FULLWIDTH:MOBILE': boolean | null | undefined;
         CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT: number;
-        'CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE': number | undefined;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE': number | null | undefined;
         CB_PLACEMENT_PROP_SECTION_SPEC_ROWS: number;
-        'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE': number | undefined;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE': number | null | undefined;
         CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH: number;
-        'CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE': number | undefined;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE': number | null | undefined;
     };
 };
 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;

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

@@ -16,28 +16,28 @@ export declare type CB_STYLE_PROP_BGCOLOR_SPECS_BASE = {
     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;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE:HOVER': NUMBER_INTEGER | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:HOVER': STRING_8DIGIT_HEX;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:HOVER': NUMBER_INTEGER;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE': NUMBER_INTEGER | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:HOVER': ENUM_STRING;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE': ENUM_STRING | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE:HOVER': ENUM_STRING | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:HOVER': STRING_8DIGIT_HEX;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE': STRING_8DIGIT_HEX | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:HOVER': NUMBER_INTEGER;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE': NUMBER_INTEGER | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE:HOVER': NUMBER_INTEGER | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:HOVER': ENUM_STRING;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE': ENUM_STRING | undefined;
-    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDCOLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_ENDLOC:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_GRADIENT:MOBILE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTCOLOR:MOBILE:HOVER': STRING_8DIGIT_HEX | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_STARTLOC:MOBILE:HOVER': NUMBER_INTEGER | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGCOLOR_SPEC_TYPE:MOBILE:HOVER': ENUM_STRING | null | undefined;
 };

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

@@ -28,13 +28,12 @@ var AVAILABLE_SPECS = [
 function parseStylePropBgColor(namedProps, device) {
     var specs = namedProps.specs;
     var bgColorCssProperties = AVAILABLE_SPECS.reduce(function (acc, cur) {
-        var _a, _b;
+        var _a;
         var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
         var value = specs[baseKey];
-        var hoverValue = specs[baseKey + ":HOVER"];
         return {
             style: __assign(__assign({}, acc.style), (_a = {}, _a[baseKey] = (0, isNullOrUndefined_1.default)(value) ? specs[cur] : value, _a)),
-            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[baseKey] = (0, isNullOrUndefined_1.default)(hoverValue) ? specs[cur + ":HOVER"] : hoverValue, _b))
+            hoverStyle: __assign({}, acc.hoverStyle)
         };
     }, {
         style: {},
@@ -62,7 +61,7 @@ function valueGenerator(valueSet, device) {
             case 'SOLID':
                 return "" + valueSet.CB_STYLE_PROP_BGCOLOR_SPEC_COLOR;
             case 'NONE':
-                return 'NONE';
+                return 'transparent';
             default:
                 return '';
         }
@@ -84,7 +83,7 @@ function valueGenerator(valueSet, device) {
             case 'SOLID':
                 return "" + valueSet['CB_STYLE_PROP_BGCOLOR_SPEC_COLOR:MOBILE'];
             case 'NONE':
-                return 'NONE';
+                return 'transparent';
             default:
                 return '';
         }

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

@@ -10,10 +10,10 @@ export declare type CB_STYLE_PROP_BGIMAGE_SPECS_BASE = {
     CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION: ENUM_STRING;
 };
 export declare type CB_STYLE_PROP_BGIMAGE_SPECS = CB_STYLE_PROP_BGIMAGE_SPECS_BASE & {
-    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': STRING_PLAIN;
-    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': STRING_PLAIN | undefined;
-    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER': STRING_PLAIN | undefined;
-    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': ENUM_STRING;
-    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE': ENUM_STRING | undefined;
-    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER': ENUM_STRING | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': STRING_PLAIN | null | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': STRING_PLAIN | null | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER': STRING_PLAIN | null | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE': ENUM_STRING | null | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER': ENUM_STRING | null | undefined;
 };

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

@@ -21,20 +21,18 @@ function parseStylePropBGImage(namedProps, device) {
         var _a, _b;
         var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
         var cssPropertyKey = getParsedKey(baseKey);
-        var value = specs[baseKey];
-        var hoverValue = specs[baseKey + ":HOVER"];
-        var isPosition = cssPropertyKey === 'position';
+        var value = specs[baseKey] || specs[cur];
+        var isPosition = cssPropertyKey === 'backgroundPosition';
         if (isPosition) {
             var positionCss = getCssProperties(value);
-            var hoverPositionCss = getCssProperties(hoverValue);
             return {
-                style: __assign(__assign({}, acc.style), positionCss),
-                hoverStyle: __assign(__assign({}, acc.hoverStyle), hoverPositionCss)
+                style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = positionCss, _a)),
+                hoverStyle: __assign({}, acc.hoverStyle)
             };
         }
         return {
-            style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = value === null || value === void 0 ? void 0 : value.toLowerCase(), _a)),
-            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[cssPropertyKey] = hoverValue === null || hoverValue === void 0 ? void 0 : hoverValue.toLowerCase(), _b))
+            style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = value === null || value === void 0 ? void 0 : value.toLowerCase(), _b)),
+            hoverStyle: __assign({}, acc.hoverStyle)
         };
     }, {
         style: {},
@@ -48,71 +46,35 @@ function getParsedKey(key) {
         case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER':
         case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE':
         case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER':
-            return 'objectFit';
+            return 'backgroundSize';
         case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION':
         case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER':
         case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE':
         case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER':
-            return 'position';
+            return 'backgroundPosition';
     }
 }
 function getCssProperties(value) {
     switch (value) {
         case 'LT':
-            return {
-                display: 'flex',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-start'
-            };
+            return 'left top';
         case 'CT':
-            return {
-                display: 'flex',
-                alignItems: 'flex-start',
-                justifyContent: 'center'
-            };
+            return 'center top';
         case 'RT':
-            return {
-                display: 'flex',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end'
-            };
+            return 'right top';
         case 'LC':
-            return {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start'
-            };
+            return 'left center';
         case 'CC':
-            return {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
-            };
+            return 'center center';
         case 'RC':
-            return {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end'
-            };
+            return 'right center';
         case 'LB':
-            return {
-                display: 'flex',
-                alignItems: 'flex-end',
-                justifyContent: 'flex-start'
-            };
+            return 'left bottom';
         case 'CB':
-            return {
-                display: 'flex',
-                alignItems: 'flex-end',
-                justifyContent: 'center'
-            };
+            return 'center bottom';
         case 'RB':
-            return {
-                display: 'flex',
-                alignItems: 'flex-end',
-                justifyContent: 'flex-end'
-            };
+            return 'right bottom';
         default:
-            return {};
+            return '';
     }
 }