pds-dev-kit-web-test 0.2.18 → 0.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.js +1 -1
  2. package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js +2 -4
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +6 -1
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js +5 -3
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgImage.d.ts +4 -0
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgImage.js +17 -3
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropImage.js +1 -1
  8. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackground.js CHANGED
@@ -35,7 +35,7 @@ function CustomSectionBackground(_a) {
35
35
  var isOverlay = getIsOverlay(isMobile, CB_STYLE_PROP_BGOVERLAY);
36
36
  var isBgMedia = getIsBgMedia(isMobile, CB_STYLE_PROP_BGMEDIA);
37
37
  var mediaType = getMediaType(isMobile, CB_STYLE_PROP_BGMEDIA);
38
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOverlay && CB_STYLE_PROP_BGOVERLAY && ((0, jsx_runtime_1.jsx)(S_CustomBackgroundOverlay, { className: "Overlay", style: __assign({}, overlayStyle) }, void 0)), (0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ className: "CustomSection", ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background, overflow: mediaType === 'IMAGE' ? 'scroll' : 'hidden' }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: id, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef }, void 0)) }), void 0)] }, void 0));
38
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isOverlay && CB_STYLE_PROP_BGOVERLAY && ((0, jsx_runtime_1.jsx)(S_CustomBackgroundOverlay, { className: "Overlay", style: __assign({}, overlayStyle) }, void 0)), (0, jsx_runtime_1.jsx)(S_CustomBackgroundWrapper, __assign({ className: "CustomSection", ref: backgroundRef, style: __assign(__assign({}, effect), { background: style.background }) }, { children: isBgMedia && CB_STYLE_PROP_BGMEDIA && ((0, jsx_runtime_1.jsx)(CustomSectionBackgroundMedia_1.CustomSectionBackgroundMedia, { specs: CB_STYLE_PROP_BGMEDIA, componentStyle: style, playerId: id, mediaType: mediaType || 'NONE', device: isMobile ? 'MOBILE' : 'DESKTOP', backgroundRef: backgroundRef }, void 0)) }), void 0)] }, void 0));
39
39
  }
40
40
  function getIsOverlay(isMobile, specs) {
41
41
  if (!specs) {
package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js CHANGED
@@ -42,7 +42,7 @@ var YouTubeIframe_1 = require("../../YouTubeIframe");
42
42
  var util_1 = require("../util");
43
43
  function CustomSectionBackgroundMedia(_a) {
44
44
  var specs = _a.specs, playerId = _a.playerId, mediaType = _a.mediaType, componentStyle = _a.componentStyle, device = _a.device, backgroundRef = _a.backgroundRef;
45
- var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL = _b.CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR;
45
+ var _b = (0, util_1.parseSectionBackgroundMediaData)(specs, device), CB_STYLE_PROP_BGMEDIA_SPEC_YSRC = _b.CB_STYLE_PROP_BGMEDIA_SPEC_YSRC, CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY = _b.CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY, CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME, CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME = _b.CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME, CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR = _b.CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR;
46
46
  var _c = (0, react_1.useState)({ width: 0, height: 0 }), youtubeSize = _c[0], setYoutubeSize = _c[1];
47
47
  var getResponsiveYoutubeSize = (0, react_1.useCallback)(function () {
48
48
  var backgroundWrapper = backgroundRef.current;
@@ -88,9 +88,7 @@ function CustomSectionBackgroundMedia(_a) {
88
88
  }
89
89
  switch (mediaType) {
90
90
  case 'IMAGE':
91
- return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: {
92
- overflow: CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL ? 'auto' : 'hidden'
93
- }, normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0)) }, void 0));
91
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0)) }, void 0));
94
92
  case 'YOUTUBE':
95
93
  return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: (0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME) }, void 0) }), void 0));
96
94
  case 'NONE':
package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js CHANGED
@@ -161,7 +161,12 @@ function CustomSection(props) {
161
161
  });
162
162
  };
163
163
  var onWidthChange = function (width) {
164
- var cellWidth = width / 24;
164
+ if (device === 'MOBILE') {
165
+ var cellWidth_1 = width / MOBILE_GRID_COLS;
166
+ setRowHeight(cellWidth_1 * 0.56);
167
+ return;
168
+ }
169
+ var cellWidth = width / DESKTOP_GRID_COLS;
165
170
  setRowHeight(cellWidth * 0.56);
166
171
  };
167
172
  var padding = (0, parseSectionPadding_1.default)(CB_LAYOUT_PROP_PADDING, device);
package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js CHANGED
@@ -49,8 +49,10 @@ function parseStyleTextToCSSProp(_a) {
49
49
  };
50
50
  }
51
51
  if (cssPropertyKey === 'letterSpacing') {
52
- var numValue = Math.abs(+value) * (+value > 0 ? 0.01 : -0.01) + "em";
53
- var numHoverValue = Math.abs(+hoverValue) * (+hoverValue > 0 ? 0.01 : -0.01) + "em";
52
+ var numValue = typeof value === 'number' ? Math.abs(+value) * (+value > 0 ? 0.01 : -0.01) + "em" : value;
53
+ var numHoverValue = typeof hoverValue === 'number'
54
+ ? Math.abs(+hoverValue) * (+hoverValue > 0 ? 0.01 : -0.01) + "em"
55
+ : hoverValue;
54
56
  if (numHoverValue === null || numHoverValue === undefined) {
55
57
  return {
56
58
  style: __assign(__assign({}, acc.style), (_g = {}, _g[cssPropertyKey] = numValue, _g)),
@@ -77,7 +79,7 @@ function parseStyleTextToCSSProp(_a) {
77
79
  if (cssPropertyKey === 'HORIZONTAL') {
78
80
  var horizontalObj = getHorizontalPositionValue(String(value));
79
81
  var hoverHorizontalObj = getHorizontalPositionValue(String(hoverValue));
80
- if (hoverHorizontalObj === null || hoverHorizontalObj === undefined) {
82
+ if (hoverValue === null || hoverValue === undefined) {
81
83
  return { style: __assign(__assign({}, acc.style), horizontalObj), hoverStyle: __assign({}, acc.hoverStyle) };
82
84
  }
83
85
  return {
package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgImage.d.ts CHANGED
@@ -8,6 +8,7 @@ export default function parseStylePropBGImage(namedProps: NAMED_CB_STYLE_BGIMAGE
8
8
  export declare type CB_STYLE_PROP_BGIMAGE_SPECS_BASE = {
9
9
  CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: STRING_PLAIN;
10
10
  CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION: ENUM_STRING;
11
+ CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL: boolean;
11
12
  };
12
13
  export declare type CB_STYLE_PROP_BGIMAGE_SPECS = CB_STYLE_PROP_BGIMAGE_SPECS_BASE & {
13
14
  'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': STRING_PLAIN | null | undefined;
@@ -16,4 +17,7 @@ export declare type CB_STYLE_PROP_BGIMAGE_SPECS = CB_STYLE_PROP_BGIMAGE_SPECS_BA
16
17
  'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': ENUM_STRING | null | undefined;
17
18
  'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE': ENUM_STRING | null | undefined;
18
19
  'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER': ENUM_STRING | null | undefined;
20
+ 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:HOVER': boolean | null | undefined;
21
+ 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE': boolean | null | undefined;
22
+ 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE:HOVER': boolean | null | undefined;
19
23
  };
package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBgImage.js CHANGED
@@ -13,16 +13,18 @@ var __assign = (this && this.__assign) || function () {
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  var AVAILABLE_SPECS = [
15
15
  'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT',
16
- 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION'
16
+ 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION',
17
+ 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL'
17
18
  ];
18
19
  function parseStylePropBGImage(namedProps, device) {
19
20
  var specs = namedProps.specs;
20
21
  return AVAILABLE_SPECS.reduce(function (acc, cur) {
21
- var _a, _b;
22
+ var _a, _b, _c;
22
23
  var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
23
24
  var cssPropertyKey = getParsedKey(baseKey);
24
25
  var value = specs[baseKey] || specs[cur];
25
26
  var isPosition = cssPropertyKey === 'backgroundPosition';
27
+ var isAttachment = cssPropertyKey === 'backgroundAttachment';
26
28
  if (isPosition) {
27
29
  var positionCss = getCssProperties(value);
28
30
  return {
@@ -30,8 +32,15 @@ function parseStylePropBGImage(namedProps, device) {
30
32
  hoverStyle: __assign({}, acc.hoverStyle)
31
33
  };
32
34
  }
35
+ if (isAttachment) {
36
+ var positionCss = value ? 'fixed' : 'unset';
37
+ return {
38
+ style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = positionCss, _b)),
39
+ hoverStyle: __assign({}, acc.hoverStyle)
40
+ };
41
+ }
33
42
  return {
34
- style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = value === null || value === void 0 ? void 0 : value.toLowerCase(), _b)),
43
+ style: __assign(__assign({}, acc.style), (_c = {}, _c[cssPropertyKey] = value, _c)),
35
44
  hoverStyle: __assign({}, acc.hoverStyle)
36
45
  };
37
46
  }, {
@@ -52,6 +61,11 @@ function getParsedKey(key) {
52
61
  case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE':
53
62
  case 'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER':
54
63
  return 'backgroundPosition';
64
+ case 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL':
65
+ case 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:HOVER':
66
+ case 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE':
67
+ case 'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE:HOVER':
68
+ return 'backgroundAttachment';
55
69
  }
56
70
  }
57
71
  function getCssProperties(value) {
package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropImage.js CHANGED
@@ -27,7 +27,7 @@ function parseStylePropImage(namedProps, device) {
27
27
  if (isPosition) {
28
28
  var positionCss = getCssProperties(value);
29
29
  var hoverPositionCss = getCssProperties(hoverValue);
30
- if (hoverPositionCss === null || hoverPositionCss === undefined) {
30
+ if (hoverValue === null || hoverValue === undefined) {
31
31
  return {
32
32
  style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = positionCss, _a)),
33
33
  hoverStyle: __assign({}, acc.hoverStyle)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.2.18",
3
+ "version": "0.2.20",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",