pb-sxp-ui 1.9.0 → 1.9.1

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 (58) hide show
  1. package/dist/index.cjs +197 -192
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +67 -4
  4. package/dist/index.js +197 -192
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +197 -192
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
  15. package/es/core/components/SxpPageRender/Hashtag/index.js +2 -2
  16. package/es/core/components/SxpPageRender/Modal/index.js +44 -6
  17. package/es/core/components/SxpPageRender/index.js +3 -3
  18. package/es/core/hooks/useFocusTrap.d.ts +2 -0
  19. package/es/core/hooks/useFocusTrap.js +37 -0
  20. package/es/index.d.ts +1 -0
  21. package/es/index.js +1 -0
  22. package/es/materials/sxp/popup/CommodityDetail/index.js +4 -2
  23. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  24. package/es/materials/sxp/popup/CommodityList/index.js +32 -28
  25. package/es/materials/sxp/template/Appoint/index.js +1 -1
  26. package/es/materials/sxp/template/Commodity/index.js +4 -4
  27. package/es/materials/sxp/template/CommodityDiro/index.js +4 -4
  28. package/es/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  29. package/es/materials/sxp/template/Link/index.js +1 -1
  30. package/es/materials/sxp/template/MultiCommodity/index.js +23 -42
  31. package/es/materials/sxp/template/MultiCommodityDiro/index.js +24 -42
  32. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +25 -44
  33. package/es/materials/sxp/template/components/EventProvider.d.ts +2 -0
  34. package/es/materials/sxp/template/components/EventProvider.js +22 -11
  35. package/es/materials/sxp/template/components/Scroll.js +1 -1
  36. package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
  37. package/lib/core/components/SxpPageRender/Hashtag/index.js +2 -2
  38. package/lib/core/components/SxpPageRender/Modal/index.js +44 -6
  39. package/lib/core/components/SxpPageRender/index.js +3 -3
  40. package/lib/core/hooks/useFocusTrap.d.ts +2 -0
  41. package/lib/core/hooks/useFocusTrap.js +39 -0
  42. package/lib/index.d.ts +1 -0
  43. package/lib/index.js +1 -0
  44. package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -2
  45. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  46. package/lib/materials/sxp/popup/CommodityList/index.js +32 -28
  47. package/lib/materials/sxp/template/Appoint/index.js +1 -1
  48. package/lib/materials/sxp/template/Commodity/index.js +4 -4
  49. package/lib/materials/sxp/template/CommodityDiro/index.js +4 -4
  50. package/lib/materials/sxp/template/CommodityDiroNew/index.js +4 -4
  51. package/lib/materials/sxp/template/Link/index.js +1 -1
  52. package/lib/materials/sxp/template/MultiCommodity/index.js +22 -41
  53. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +23 -41
  54. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +24 -43
  55. package/lib/materials/sxp/template/components/EventProvider.d.ts +2 -0
  56. package/lib/materials/sxp/template/components/EventProvider.js +21 -10
  57. package/lib/materials/sxp/template/components/Scroll.js +1 -1
  58. package/package.json +1 -1
package/es/materials/sxp/template/MultiCommodityDiro/index.js CHANGED
@@ -2,54 +2,36 @@ import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useState } from 'react';
4
4
  import { SwiperSlide } from 'swiper/react';
5
- import { throttle } from 'lodash';
6
5
  import Scroll from '../components/Scroll';
7
6
  import Img from '../components/Img';
8
7
  import styles from './index.module.less';
9
- import { useEditor, useSxpDataSource } from '../../../../core/hooks';
10
- import { useEventReport } from '../../../../core/hooks/useEventReport';
8
+ import { useSxpDataSource } from '../../../../core/hooks';
11
9
  import { setFontForText } from '../../../../core/utils/tool';
10
+ import EventProvider from '../components/EventProvider';
12
11
  const MultiCommodityDiro = (_a) => {
13
12
  var _b, _c;
14
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
15
- const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
16
- const { popup } = useEditor();
17
- const { jumpToWeb } = useEventReport();
18
- const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
19
- const handleClick = throttle((item, multiCheckIndex) => {
20
- ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
21
- eventSubject: 'clickCta',
22
- eventDescription: 'User clicked the CTA'
23
- }, recData, item, index);
24
- setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index, multiCheckIndex }));
25
- if (isExternalLink) {
26
- if (item === null || item === void 0 ? void 0 : item.link) {
27
- jumpToWeb(recData, item, item.bindCta, index);
28
- window.location.href = window.getJointUtmLink(item.link);
29
- }
30
- }
31
- else {
32
- onClick === null || onClick === void 0 ? void 0 : onClick();
33
- }
34
- }, popup === null || popup === void 0 ? void 0 : popup.duration);
35
- return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
36
- var _a, _b, _c, _d, _e, _f, _g, _h;
37
- return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
38
- React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
39
- React.createElement("div", { className: css({
40
- color: '#000',
41
- display: 'flex',
42
- flexDirection: 'column',
43
- justifyContent: 'space-between',
44
- width: '100%',
45
- overflow: 'hidden'
46
- }) },
47
- React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
48
- __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
49
- } }),
50
- React.createElement("div", { className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
51
- __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
52
- } }))))));
13
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
14
+ const { sxpParameter } = useSxpDataSource();
15
+ const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
16
+ return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
17
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
18
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
19
+ React.createElement(EventProvider, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
20
+ React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
21
+ React.createElement("div", { className: css({
22
+ color: '#000',
23
+ display: 'flex',
24
+ flexDirection: 'column',
25
+ justifyContent: 'space-between',
26
+ width: '100%',
27
+ overflow: 'hidden'
28
+ }) },
29
+ React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
30
+ __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
31
+ } }),
32
+ React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_h = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _h === void 0 ? void 0 : _h.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
33
+ __html: setFontForText((_k = (_j = item === null || item === void 0 ? void 0 : item.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
34
+ } })))))));
53
35
  })));
54
36
  };
55
37
  export default memo(MultiCommodityDiro);
package/es/materials/sxp/template/MultiCommodityDiroNew/index.js CHANGED
@@ -2,56 +2,37 @@ import { __rest } from "tslib";
2
2
  import { css } from '@emotion/css';
3
3
  import React, { memo, useState } from 'react';
4
4
  import { SwiperSlide } from 'swiper/react';
5
- import { throttle } from 'lodash';
6
5
  import Scroll from '../components/Scroll';
7
6
  import Img from '../components/Img';
8
7
  import styles from './index.module.less';
9
- import { useEditor, useSxpDataSource } from '../../../../core/hooks';
10
- import { useEventReport } from '../../../../core/hooks/useEventReport';
8
+ import { useSxpDataSource } from '../../../../core/hooks';
11
9
  import { setFontForText } from '../../../../core/utils/tool';
10
+ import EventProvider from '../components/EventProvider';
12
11
  const MultiCommodityDiroNew = (_a) => {
13
12
  var _b, _c;
14
- var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY", "isActive"]);
15
- const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
16
- const { popup } = useEditor();
17
- const { jumpToWeb } = useEventReport();
18
- const [products, setProducts] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
19
- const handleClick = throttle((item, multiCheckIndex) => {
20
- ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
21
- eventSubject: 'clickCta',
22
- eventDescription: 'User clicked the CTA'
23
- }, recData, item, index);
24
- setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index,
25
- multiCheckIndex }));
26
- if (isExternalLink) {
27
- if (item === null || item === void 0 ? void 0 : item.link) {
28
- jumpToWeb(recData, item, item.bindCta, index);
29
- window.location.href = window.getJointUtmLink(item.link);
30
- }
31
- }
32
- else {
33
- onClick === null || onClick === void 0 ? void 0 : onClick();
34
- }
35
- }, popup === null || popup === void 0 ? void 0 : popup.duration);
36
- return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
37
- var _a, _b, _c, _d, _e, _f, _g;
38
- return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, index) }),
39
- React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
40
- React.createElement("div", { className: css({
41
- color: '#fff',
42
- display: 'flex',
43
- flexDirection: 'column',
44
- justifyContent: 'center',
45
- width: '100%',
46
- overflow: 'hidden',
47
- lineHeight: '20px'
48
- }) },
49
- React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
50
- __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
51
- } }),
52
- React.createElement("div", { className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
53
- __html: setFontForText((_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
54
- } }))))));
13
+ var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive"]);
14
+ const { sxpParameter } = useSxpDataSource();
15
+ const [products] = useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
16
+ return (React.createElement(Scroll, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
17
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
18
+ return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
19
+ React.createElement(EventProvider, Object.assign({ rec: recData, multiCheckIndex: itemIndex }, props),
20
+ React.createElement(Img, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: itemIndex, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
21
+ React.createElement("div", { className: css({
22
+ color: '#fff',
23
+ display: 'flex',
24
+ flexDirection: 'column',
25
+ justifyContent: 'center',
26
+ width: '100%',
27
+ overflow: 'hidden',
28
+ lineHeight: '20px'
29
+ }) },
30
+ React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
31
+ __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
32
+ } }),
33
+ React.createElement("button", { "aria-label": (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now', className: css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
34
+ __html: setFontForText((_j = (_h = item === null || item === void 0 ? void 0 : item.bindCta) === null || _h === void 0 ? void 0 : _h.enTitle) !== null && _j !== void 0 ? _j : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
35
+ } })))))));
55
36
  })));
56
37
  };
57
38
  export default memo(MultiCommodityDiroNew);
package/es/materials/sxp/template/components/EventProvider.d.ts CHANGED
@@ -9,6 +9,8 @@ export interface IEventProviderProps {
9
9
  isExternalLink?: boolean;
10
10
  index?: number;
11
11
  jumpLink?: string;
12
+ multItem?: any;
13
+ multiCheckIndex?: number;
12
14
  }
13
15
  declare const _default: React.NamedExoticComponent<IEventProviderProps>;
14
16
  export default _default;
package/es/materials/sxp/template/components/EventProvider.js CHANGED
@@ -1,34 +1,45 @@
1
1
  import { __rest } from "tslib";
2
- import React, { memo, useRef } from 'react';
2
+ import React, { memo, useEffect, useRef, useState } from 'react';
3
3
  import { throttle } from 'lodash';
4
4
  import { useEditor, useSxpDataSource } from '../../../../core/hooks';
5
5
  import { useEventReport } from '../../../../core/hooks/useEventReport';
6
6
  const EventProvider = (_a) => {
7
- var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink"]);
7
+ var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink, multItem, multiCheckIndex } = _a, props = __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink", "multItem", "multiCheckIndex"]);
8
8
  const ref = useRef(null);
9
9
  const { popup } = useEditor();
10
10
  const { setPopupDetailData, ctaEvent } = useSxpDataSource();
11
11
  const { jumpToWeb } = useEventReport();
12
- const handleClick = throttle(() => {
13
- var _a, _b, _c, _d, _e, _f, _g, _h;
14
- const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
12
+ const [element, setElement] = useState(null);
13
+ const handleClick = throttle((event) => {
14
+ var _a, _b, _c, _d, _e, _f, _g;
15
+ event.preventDefault();
16
+ const item = (_c = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video) !== null && _c !== void 0 ? _c : multItem;
15
17
  ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
16
18
  eventSubject: 'clickCta',
17
19
  eventDescription: 'User clicked the CTA'
18
20
  }, rec, item, index);
19
- setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
21
+ setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(multItem && multiCheckIndex
22
+ ? Object.assign(Object.assign({}, rec), { video: Object.assign(Object.assign({}, rec === null || rec === void 0 ? void 0 : rec.video), { bindProduct: multItem }), index, multiCheckIndex }) : Object.assign(Object.assign({}, rec), { index }));
23
+ setElement(ref === null || ref === void 0 ? void 0 : ref.current);
20
24
  if (isExternalLink) {
21
- if (jumpLink || ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link)) {
22
- const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
23
- const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
25
+ const link = ((_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.link) || (multItem === null || multItem === void 0 ? void 0 : multItem.link);
26
+ if (jumpLink || link) {
27
+ const cta = ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindCta) || (multItem === null || multItem === void 0 ? void 0 : multItem.bindCta);
28
+ const product = ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) || multItem;
24
29
  jumpToWeb(rec, product, cta, index);
25
- window.location.href = window.getJointUtmLink(jumpLink || ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link) || '');
30
+ window.location.href = window.getJointUtmLink(jumpLink || link || '');
26
31
  }
27
32
  }
28
33
  else {
29
34
  onClick === null || onClick === void 0 ? void 0 : onClick();
30
35
  }
31
36
  }, popup === null || popup === void 0 ? void 0 : popup.duration);
32
- return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
37
+ useEffect(() => {
38
+ if (element && !(popup === null || popup === void 0 ? void 0 : popup.id)) {
39
+ element === null || element === void 0 ? void 0 : element.focus();
40
+ setElement(null);
41
+ }
42
+ }, [element, popup]);
43
+ return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
33
44
  };
34
45
  export default memo(EventProvider);
package/es/materials/sxp/template/components/Scroll.js CHANGED
@@ -13,6 +13,6 @@ const Scroll = ({ children, isPadding = true, style, enableSlideActive = false }
13
13
  if (enableSlideActive)
14
14
  (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
15
15
  }, [popupDetailData, enableSlideActive]);
16
- return (React.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
16
+ return (React.createElement(Swiper, { role: 'list', tag: 'ul', ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [FreeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
17
17
  };
18
18
  export default memo(Scroll);
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -53,7 +53,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
53
53
  wordBreak: 'break-word'
54
54
  }, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
55
55
  react_1.default.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
56
- text && isPost && isShow && (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
56
+ text && isPost && isShow && (react_1.default.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
57
57
  __html: (0, tool_1.setFontForText)(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
58
58
  } }))));
59
59
  };
package/lib/core/components/SxpPageRender/Hashtag/index.js CHANGED
@@ -43,7 +43,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle, hashTagRigh
43
43
  marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px`,
44
44
  width: hashTagRightMargin
45
45
  } },
46
- react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'button', "aria-label": item },
47
- react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
46
+ react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item), tag: 'li', role: 'listitem' },
47
+ react_1.default.createElement("button", { className: 'clc-sxp-bottom-hashtag-item-button', "aria-label": item, "aria-describedby": item, dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
48
48
  };
49
49
  exports.default = (0, react_1.memo)(Hashtag);
package/lib/core/components/SxpPageRender/Modal/index.js CHANGED
@@ -12,6 +12,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
12
12
  const fTouchRef = (0, react_1.useRef)(null);
13
13
  const touchMoveRef = (0, react_1.useRef)(null);
14
14
  const ref = (0, react_1.useRef)(null);
15
+ const modalRef = (0, react_1.useRef)(null);
15
16
  const MODAL_DEF_TRANS = fullHeight * 0.2;
16
17
  const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
17
18
  const [modalTrans, setModalTrans] = (0, react_1.useState)(MODAL_DEF_TRANS);
@@ -59,6 +60,43 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
59
60
  const child = (0, react_1.useCallback)(() => {
60
61
  return children;
61
62
  }, [_popup, openState, globalConfig]);
63
+ (0, react_1.useEffect)(() => {
64
+ const trapFocus = (element) => {
65
+ var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
66
+ var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
67
+ var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
68
+ var KEYCODE_TAB = 9;
69
+ element.addEventListener('keydown', function (e) {
70
+ if (e.key === 'Escape' || e.key === 'Esc') {
71
+ handleClose();
72
+ e.preventDefault();
73
+ }
74
+ var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
75
+ if (!isTabPressed) {
76
+ return;
77
+ }
78
+ if (e.shiftKey) {
79
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === firstFocusableEl) {
80
+ lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
81
+ e.preventDefault();
82
+ }
83
+ }
84
+ else {
85
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === lastFocusableEl) {
86
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
87
+ e.preventDefault();
88
+ }
89
+ }
90
+ });
91
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
92
+ };
93
+ if (modalRef === null || modalRef === void 0 ? void 0 : modalRef.current)
94
+ trapFocus(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current);
95
+ return () => {
96
+ var _a;
97
+ (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', trapFocus);
98
+ };
99
+ }, [modalRef, isShow, _popup]);
62
100
  if (!modalEleRef.current)
63
101
  return null;
64
102
  const handleClose = (0, lodash_1.debounce)(() => {
@@ -120,7 +158,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
120
158
  width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
121
159
  height: '100%'
122
160
  } },
123
- react_1.default.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
161
+ react_1.default.createElement("div", Object.assign({ ref: modalRef, className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, role: 'dialog', "aria-label": (_s = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _s === void 0 ? void 0 : _s.displayName, "aria-modal": true, "aria-labelledby": 'modal-content', style: Object.assign(Object.assign({ padding, animationDuration: ((_t = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _t !== void 0 ? _t : 0) / 1000 + 's' }, (isScrollFullScreen && {
124
162
  transform: `translateY(${modalTrans}px)`
125
163
  })), { overflow: 'hidden', borderRadius: `${(_x = (_w = (_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.popupBg) === null || _w === void 0 ? void 0 : _w.borderRadius) !== null && _x !== void 0 ? _x : 0}px`, zIndex: 9 }), onClick: (e) => {
126
164
  e.stopPropagation();
@@ -130,17 +168,17 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
130
168
  onTouchStart: handleTouchStart,
131
169
  onTouchEnd: handleTouchEnd
132
170
  })),
133
- react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
134
- react_1.default.createElement("img", { src: (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _y !== void 0 ? _y : closeIcon, alt: 'close button', className: 'modal-icon' })),
135
- react_1.default.createElement("div", Object.assign({ ref: ref, style: {
171
+ react_1.default.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
136
172
  height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
137
173
  overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
138
174
  zIndex: 1
139
- } }, (((_0 = (_z = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _z === void 0 ? void 0 : _z.props) === null || _0 === void 0 ? void 0 : _0.enableFixedCloseButton) && {
175
+ } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
140
176
  onScroll: (e) => {
141
177
  var _a;
142
178
  setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
143
179
  }
144
- })), child())))))), modalEleRef.current);
180
+ })), child()),
181
+ react_1.default.createElement("button", { className: 'modal-icon-wrapper', role: 'button', "aria-label": 'close button', onClick: onClose, style: { top: scrollTop } },
182
+ react_1.default.createElement("img", { src: (_0 = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _0 !== void 0 ? _0 : closeIcon, alt: 'close button', className: 'modal-icon' }))))))), modalEleRef.current);
145
183
  };
146
184
  exports.default = (0, react_1.memo)(Modal);
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -496,9 +496,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
496
496
  alignItems: 'center'
497
497
  } },
498
498
  react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement(react_1.default.Fragment, null,
499
+ renderBottom(rec, index),
499
500
  renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
500
501
  renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
501
- renderBottom(rec, index),
502
502
  renderContent(rec, index)))))));
503
503
  });
504
504
  }, [
@@ -564,9 +564,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
564
564
  }
565
565
  }
566
566
  }, direction: 'vertical', height: height },
567
+ renderView,
567
568
  renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
568
- renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
569
- renderView),
569
+ renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
570
570
  react_1.default.createElement(WaterFall_1.default, Object.assign({}, (_w = (_v = (_u = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.item) === null || _w === void 0 ? void 0 : _w.props)),
571
571
  react_1.default.createElement(ConsentPopup_1.default, { resolver: resolver, globalConfig: globalConfig })));
572
572
  };
package/lib/core/hooks/useFocusTrap.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const useFocusTrap: (elementRef: any) => void;
2
+ export default useFocusTrap;
package/lib/core/hooks/useFocusTrap.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const react_1 = require("react");
4
+ const useFocusTrap = (elementRef) => {
5
+ (0, react_1.useEffect)(() => {
6
+ const trapFocus = (element) => {
7
+ var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
8
+ var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
9
+ var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
10
+ var KEYCODE_TAB = 9;
11
+ element.addEventListener('keydown', function (e) {
12
+ var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
13
+ if (!isTabPressed) {
14
+ return;
15
+ }
16
+ if (e.shiftKey) {
17
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === firstFocusableEl) {
18
+ lastFocusableEl === null || lastFocusableEl === void 0 ? void 0 : lastFocusableEl.focus();
19
+ e.preventDefault();
20
+ }
21
+ }
22
+ else {
23
+ if ((document === null || document === void 0 ? void 0 : document.activeElement) === lastFocusableEl) {
24
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
25
+ e.preventDefault();
26
+ }
27
+ }
28
+ });
29
+ firstFocusableEl === null || firstFocusableEl === void 0 ? void 0 : firstFocusableEl.focus();
30
+ };
31
+ if (elementRef === null || elementRef === void 0 ? void 0 : elementRef.current)
32
+ trapFocus(elementRef === null || elementRef === void 0 ? void 0 : elementRef.current);
33
+ return () => {
34
+ var _a;
35
+ (_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', trapFocus);
36
+ };
37
+ }, [elementRef]);
38
+ };
39
+ exports.default = useFocusTrap;
package/lib/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Pagebuilder } from './core/Pagebuilder';
2
+ import './index.css';
2
3
  export * as core from './core';
3
4
  export * as materials from './materials';
4
5
  export { default as SxpPageRender } from './core/components/SxpPageRender';
package/lib/index.js CHANGED
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useEditorDataProvider = exports.EditorDataProvider = exports.SxpPageCore = exports.SxpDataSourceProvider = exports.Modal = exports.DiyPortalPreview = exports.SxpPageRender = exports.materials = exports.core = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const Pagebuilder_1 = require("./core/Pagebuilder");
6
+ require("./index.css");
6
7
  exports.core = tslib_1.__importStar(require("./core"));
7
8
  exports.materials = tslib_1.__importStar(require("./materials"));
8
9
  var SxpPageRender_1 = require("./core/components/SxpPageRender");
package/lib/materials/sxp/popup/CommodityDetail/index.js CHANGED
@@ -99,7 +99,7 @@ const CommodityDetail = (_a) => {
99
99
  };
100
100
  const renderBtn = () => {
101
101
  var _a, _b;
102
- return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
102
+ return (react_1.default.createElement(react_1.default.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("a", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle },
103
103
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
104
104
  __html: (0, tool_1.setFontForText)((_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website', buttonStyle)
105
105
  } })))));
@@ -137,7 +137,9 @@ const CommodityDetail = (_a) => {
137
137
  return (react_1.default.createElement(react_1.default.Fragment, null,
138
138
  react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
139
139
  react_1.default.createElement("div", { style: { position: 'relative' } },
140
- product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
140
+ product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (react_1.default.createElement(react_2.Swiper, { a11y: {
141
+ enabled: true
142
+ }, height: height, modules: [modules_1.Pagination, modules_1.Autoplay], pagination: {
141
143
  clickable: true,
142
144
  bulletActiveClass: 'swipe-item-active-bullet',
143
145
  clickableClass: getDotsAlign,
package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js CHANGED
@@ -196,7 +196,7 @@ Made in Italy` })));
196
196
  react_1.default.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
197
197
  __html: (0, tool_1.setFontForText)((_2 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _2 !== void 0 ? _2 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
198
198
  } }))),
199
- (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("button", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
199
+ (!product || (product === null || product === void 0 ? void 0 : product.link)) && (react_1.default.createElement("a", { "aria-label": (_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', role: 'button', tabIndex: 0, onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
200
200
  react_1.default.createElement("span", { dangerouslySetInnerHTML: {
201
201
  __html: (0, tool_1.setFontForText)((_4 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _4 !== void 0 ? _4 : 'Shop now', buttonStyle)
202
202
  } }))),
package/lib/materials/sxp/popup/CommodityList/index.js CHANGED
@@ -49,39 +49,43 @@ const CommodityList = (_a) => {
49
49
  eventName: 'PageView'
50
50
  });
51
51
  }, []);
52
- return (react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
52
+ return (react_1.default.createElement("ul", { role: 'list', className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px', boxSizing: 'border-box' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
53
53
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
54
- return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement("div", Object.assign({ key: index }, props, { className: (0, css_1.css)({
55
- display: 'flex'
56
- }), onClick: () => handleClick(item, index) }),
57
- react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
58
- react_1.default.createElement("div", { style: {
59
- width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
54
+ return (react_1.default.createElement(react_1.default.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (react_1.default.createElement("li", { role: 'listitem', key: index, onClick: () => handleClick(item, index) },
55
+ react_1.default.createElement("button", Object.assign({ role: 'button', "aria-label": item === null || item === void 0 ? void 0 : item.title, tabIndex: 0, className: (0, css_1.css)({
60
56
  display: 'flex',
61
- flexDirection: 'column',
62
- justifyContent: 'space-between'
63
- } },
64
- react_1.default.createElement("div", null,
65
- react_1.default.createElement("div", { className: 'one-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
66
- __html: (0, tool_1.setFontForText)((_g = item === null || item === void 0 ? void 0 : item.title) !== null && _g !== void 0 ? _g : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
67
- } }),
68
- react_1.default.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
69
- __html: (0, tool_1.setFontForText)((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
70
- } })),
71
- react_1.default.createElement("div", { className: (0, css_1.css)({
57
+ alignItems: 'normal',
58
+ width: '100%',
59
+ textAlign: 'left'
60
+ }) }, props),
61
+ react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, translateY: translateY, imgStyle: commodityPicture, enableEventReport: false }),
62
+ react_1.default.createElement("div", { style: {
63
+ width: `calc(100% - ${(_e = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.width) !== null && _e !== void 0 ? _e : 0}px - ${(_f = commodityPicture === null || commodityPicture === void 0 ? void 0 : commodityPicture.marginRight) !== null && _f !== void 0 ? _f : 0}px)`,
72
64
  display: 'flex',
73
- alignItems: 'flex-end',
74
- justifyContent: 'space-between',
75
- width: '100%',
76
- overflow: 'hidden'
77
- }) },
65
+ flexDirection: 'column',
66
+ justifyContent: 'space-between'
67
+ } },
78
68
  react_1.default.createElement("div", null,
79
- react_1.default.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
80
- __html: (_j = priceText(item)) !== null && _j !== void 0 ? _j : ''
69
+ react_1.default.createElement("div", { className: 'one-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
70
+ __html: (0, tool_1.setFontForText)((_g = item === null || item === void 0 ? void 0 : item.title) !== null && _g !== void 0 ? _g : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
71
+ } }),
72
+ react_1.default.createElement("div", { className: 'two-line-ellipsis', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
73
+ __html: (0, tool_1.setFontForText)((_h = item === null || item === void 0 ? void 0 : item.collection) !== null && _h !== void 0 ? _h : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
81
74
  } })),
82
- react_1.default.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
83
- __html: (0, tool_1.setFontForText)((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
84
- } })))))));
75
+ react_1.default.createElement("div", { className: (0, css_1.css)({
76
+ display: 'flex',
77
+ alignItems: 'flex-end',
78
+ justifyContent: 'space-between',
79
+ width: '100%',
80
+ overflow: 'hidden'
81
+ }) },
82
+ react_1.default.createElement("div", null,
83
+ react_1.default.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
84
+ __html: (_j = priceText(item)) !== null && _j !== void 0 ? _j : ''
85
+ } })),
86
+ react_1.default.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px' }), dangerouslySetInnerHTML: {
87
+ __html: (0, tool_1.setFontForText)((_l = (_k = item === null || item === void 0 ? void 0 : item.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', buttonStyle)
88
+ } }))))))));
85
89
  })));
86
90
  };
87
91
  exports.default = (0, react_1.memo)(CommodityList);
package/lib/materials/sxp/template/Appoint/index.js CHANGED
@@ -13,7 +13,7 @@ const Appoint = (_a) => {
13
13
  const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
14
14
  const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
15
15
  const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
16
- return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: (0, css_1.css)(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
16
+ return (react_1.default.createElement(EventProvider_1.default, Object.assign({ isExternalLink: isExternalLink, rec: recData, style: Object.assign({ alignItems: 'center' }, style), index: index }, props),
17
17
  react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img, isActive: isActive }),
18
18
  react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
19
19
  __html: (0, tool_1.setFontForText)((_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)