pb-sxp-ui 1.20.30 → 1.20.31

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 (15) hide show
  1. package/dist/index.cjs +60 -16
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +60 -16
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +7 -7
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +7 -7
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +60 -16
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +7 -7
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/StructurePage/index.js +55 -16
  14. package/lib/core/components/StructurePage/index.js +55 -16
  15. package/package.json +1 -1
package/es/core/components/StructurePage/index.js CHANGED
@@ -82,34 +82,43 @@ const baseStyles = {
82
82
  carouselSection: {
83
83
  width: '100%',
84
84
  position: 'relative',
85
- padding: '20px 16px'
85
+ padding: '20px'
86
86
  },
87
87
  carouselImageContainer: {
88
88
  width: '100%',
89
- height: 'auto',
89
+ maxWidth: '100%',
90
+ margin: '0 auto',
90
91
  position: 'relative',
91
- overflow: 'hidden'
92
+ overflow: 'hidden',
93
+ aspectRatio: '9 / 16',
94
+ touchAction: 'pan-y pinch-zoom'
92
95
  },
93
96
  carouselContainer: {
94
97
  display: 'flex',
95
- transition: 'transform 0.5s ease-in-out',
96
- width: '100%'
98
+ transition: 'transform 0.3s ease-out',
99
+ width: '100%',
100
+ height: '100%'
97
101
  },
98
102
  carouselSlide: {
99
103
  minWidth: '100%',
104
+ height: '100%',
100
105
  position: 'relative'
101
106
  },
102
107
  carouselImage: {
103
108
  width: '100%',
104
- height: 'auto',
109
+ height: '100%',
105
110
  display: 'block',
106
- objectFit: 'cover'
111
+ objectFit: 'cover',
112
+ userSelect: 'none',
113
+ WebkitUserDrag: 'none'
107
114
  },
108
115
  carouselVideo: {
109
116
  width: '100%',
110
- height: 'auto',
117
+ height: '100%',
111
118
  display: 'block',
112
- objectFit: 'cover'
119
+ objectFit: 'cover',
120
+ userSelect: 'none',
121
+ WebkitUserDrag: 'none'
113
122
  },
114
123
  carouselInfoSection: {
115
124
  width: '100%',
@@ -306,12 +315,14 @@ const baseStyles = {
306
315
  }
307
316
  };
308
317
  const StructurePage = (_a) => {
309
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
318
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
310
319
  var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = __rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
311
320
  const [data, setData] = useState(null);
312
321
  const [loading, setLoading] = useState(true);
313
322
  const [error, setError] = useState(null);
314
323
  const [carouselIndex, setCarouselIndex] = useState(0);
324
+ const [touchStart, setTouchStart] = useState(null);
325
+ const [touchEnd, setTouchEnd] = useState(null);
315
326
  const heroVideoRef = useRef(null);
316
327
  const carouselVideoRefs = useRef([]);
317
328
  const [isHeroVideoPaused, setIsHeroVideoPaused] = useState(false);
@@ -629,6 +640,34 @@ const StructurePage = (_a) => {
629
640
  setCarouselIndex((prev) => (prev === data.carouselSection.length - 1 ? 0 : prev + 1));
630
641
  }
631
642
  };
643
+ const handleTouchStart = (e) => {
644
+ setTouchEnd(null);
645
+ setTouchStart(e.targetTouches[0].clientX);
646
+ };
647
+ const handleTouchMove = (e) => {
648
+ if (!touchStart)
649
+ return;
650
+ const currentTouch = e.targetTouches[0].clientX;
651
+ setTouchEnd(currentTouch);
652
+ const distance = Math.abs(touchStart - currentTouch);
653
+ if (distance > 10) {
654
+ e.preventDefault();
655
+ }
656
+ };
657
+ const handleTouchEnd = () => {
658
+ if (!touchStart || !touchEnd)
659
+ return;
660
+ const distance = touchStart - touchEnd;
661
+ const minSwipeDistance = 50;
662
+ if (distance > minSwipeDistance) {
663
+ handleCarouselNext();
664
+ }
665
+ else if (distance < -minSwipeDistance) {
666
+ handleCarouselPrev();
667
+ }
668
+ setTouchStart(null);
669
+ setTouchEnd(null);
670
+ };
632
671
  if (loading) {
633
672
  return (React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '16px' }) }, "Loading..."));
634
673
  }
@@ -648,21 +687,21 @@ const StructurePage = (_a) => {
648
687
  React.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
649
688
  isHeroVideoPaused && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (React.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
650
689
  React.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
651
- data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: Object.assign(Object.assign({}, mergeStyles(baseStyles.carouselSection, 'carouselSection')), (((_j = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _j === void 0 ? void 0 : _j.padding) && { padding: multiCTAConfig.carouselContainerStyle.padding })) },
652
- React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselImageContainer), (((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _k === void 0 ? void 0 : _k.aspectRatio) && { aspectRatio: multiCTAConfig.carouselContainerStyle.aspectRatio })) },
690
+ data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
691
+ React.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
653
692
  React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
654
693
  var _a;
655
694
  return (React.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
656
695
  React.createElement("video", { ref: (el) => {
657
696
  carouselVideoRefs.current[index] = el;
658
- }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false }),
659
- carouselVideoPausedStates[index] && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (React.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage })) : null));
697
+ }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault() }),
698
+ carouselVideoPausedStates[index] && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (React.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage, draggable: false, onDragStart: (e) => e.preventDefault() })) : null));
660
699
  })),
661
700
  React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
662
701
  React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
663
702
  React.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
664
- ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text)),
665
- renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton)))),
703
+ ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
704
+ renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
666
705
  data.highlightRevealSection && (React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
667
706
  React.createElement("div", { style: baseStyles.highlightImageContainer },
668
707
  React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
package/lib/core/components/StructurePage/index.js CHANGED
@@ -84,34 +84,43 @@ const baseStyles = {
84
84
  carouselSection: {
85
85
  width: '100%',
86
86
  position: 'relative',
87
- padding: '20px 16px'
87
+ padding: '20px'
88
88
  },
89
89
  carouselImageContainer: {
90
90
  width: '100%',
91
- height: 'auto',
91
+ maxWidth: '100%',
92
+ margin: '0 auto',
92
93
  position: 'relative',
93
- overflow: 'hidden'
94
+ overflow: 'hidden',
95
+ aspectRatio: '9 / 16',
96
+ touchAction: 'pan-y pinch-zoom'
94
97
  },
95
98
  carouselContainer: {
96
99
  display: 'flex',
97
- transition: 'transform 0.5s ease-in-out',
98
- width: '100%'
100
+ transition: 'transform 0.3s ease-out',
101
+ width: '100%',
102
+ height: '100%'
99
103
  },
100
104
  carouselSlide: {
101
105
  minWidth: '100%',
106
+ height: '100%',
102
107
  position: 'relative'
103
108
  },
104
109
  carouselImage: {
105
110
  width: '100%',
106
- height: 'auto',
111
+ height: '100%',
107
112
  display: 'block',
108
- objectFit: 'cover'
113
+ objectFit: 'cover',
114
+ userSelect: 'none',
115
+ WebkitUserDrag: 'none'
109
116
  },
110
117
  carouselVideo: {
111
118
  width: '100%',
112
- height: 'auto',
119
+ height: '100%',
113
120
  display: 'block',
114
- objectFit: 'cover'
121
+ objectFit: 'cover',
122
+ userSelect: 'none',
123
+ WebkitUserDrag: 'none'
115
124
  },
116
125
  carouselInfoSection: {
117
126
  width: '100%',
@@ -308,12 +317,14 @@ const baseStyles = {
308
317
  }
309
318
  };
310
319
  const StructurePage = (_a) => {
311
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
320
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
312
321
  var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = tslib_1.__rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
313
322
  const [data, setData] = (0, react_1.useState)(null);
314
323
  const [loading, setLoading] = (0, react_1.useState)(true);
315
324
  const [error, setError] = (0, react_1.useState)(null);
316
325
  const [carouselIndex, setCarouselIndex] = (0, react_1.useState)(0);
326
+ const [touchStart, setTouchStart] = (0, react_1.useState)(null);
327
+ const [touchEnd, setTouchEnd] = (0, react_1.useState)(null);
317
328
  const heroVideoRef = (0, react_1.useRef)(null);
318
329
  const carouselVideoRefs = (0, react_1.useRef)([]);
319
330
  const [isHeroVideoPaused, setIsHeroVideoPaused] = (0, react_1.useState)(false);
@@ -631,6 +642,34 @@ const StructurePage = (_a) => {
631
642
  setCarouselIndex((prev) => (prev === data.carouselSection.length - 1 ? 0 : prev + 1));
632
643
  }
633
644
  };
645
+ const handleTouchStart = (e) => {
646
+ setTouchEnd(null);
647
+ setTouchStart(e.targetTouches[0].clientX);
648
+ };
649
+ const handleTouchMove = (e) => {
650
+ if (!touchStart)
651
+ return;
652
+ const currentTouch = e.targetTouches[0].clientX;
653
+ setTouchEnd(currentTouch);
654
+ const distance = Math.abs(touchStart - currentTouch);
655
+ if (distance > 10) {
656
+ e.preventDefault();
657
+ }
658
+ };
659
+ const handleTouchEnd = () => {
660
+ if (!touchStart || !touchEnd)
661
+ return;
662
+ const distance = touchStart - touchEnd;
663
+ const minSwipeDistance = 50;
664
+ if (distance > minSwipeDistance) {
665
+ handleCarouselNext();
666
+ }
667
+ else if (distance < -minSwipeDistance) {
668
+ handleCarouselPrev();
669
+ }
670
+ setTouchStart(null);
671
+ setTouchEnd(null);
672
+ };
634
673
  if (loading) {
635
674
  return (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '16px' }) }, "Loading..."));
636
675
  }
@@ -650,21 +689,21 @@ const StructurePage = (_a) => {
650
689
  react_1.default.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
651
690
  isHeroVideoPaused && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (react_1.default.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
652
691
  react_1.default.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
653
- data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: Object.assign(Object.assign({}, mergeStyles(baseStyles.carouselSection, 'carouselSection')), (((_j = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _j === void 0 ? void 0 : _j.padding) && { padding: multiCTAConfig.carouselContainerStyle.padding })) },
654
- react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselImageContainer), (((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _k === void 0 ? void 0 : _k.aspectRatio) && { aspectRatio: multiCTAConfig.carouselContainerStyle.aspectRatio })) },
692
+ data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
693
+ react_1.default.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
655
694
  react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
656
695
  var _a;
657
696
  return (react_1.default.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
658
697
  react_1.default.createElement("video", { ref: (el) => {
659
698
  carouselVideoRefs.current[index] = el;
660
- }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false }),
661
- carouselVideoPausedStates[index] && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (react_1.default.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage })) : null));
699
+ }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault() }),
700
+ carouselVideoPausedStates[index] && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (react_1.default.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage, draggable: false, onDragStart: (e) => e.preventDefault() })) : null));
662
701
  })),
663
702
  react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
664
703
  react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
665
704
  react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
666
- ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text)),
667
- renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton)))),
705
+ ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
706
+ renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
668
707
  data.highlightRevealSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
669
708
  react_1.default.createElement("div", { style: baseStyles.highlightImageContainer },
670
709
  react_1.default.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.20.30",
3
+ "version": "1.20.31",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",