pb-sxp-ui 1.20.29 → 1.20.31

package/es/core/components/StructurePage/index.js

@@ -81,38 +81,48 @@ const baseStyles = {
     },
     carouselSection: {
         width: '100%',
-        position: 'relative'
+        position: 'relative',
+        padding: '20px'
     },
     carouselImageContainer: {
         width: '100%',
-        height: 'auto',
+        maxWidth: '100%',
+        margin: '0 auto',
         position: 'relative',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        aspectRatio: '9 / 16',
+        touchAction: 'pan-y pinch-zoom'
     },
     carouselContainer: {
         display: 'flex',
-        transition: 'transform 0.5s ease-in-out',
-        width: '100%'
+        transition: 'transform 0.3s ease-out',
+        width: '100%',
+        height: '100%'
     },
     carouselSlide: {
         minWidth: '100%',
+        height: '100%',
         position: 'relative'
     },
     carouselImage: {
         width: '100%',
-        height: 'auto',
+        height: '100%',
         display: 'block',
-        objectFit: 'cover'
+        objectFit: 'cover',
+        userSelect: 'none',
+        WebkitUserDrag: 'none'
     },
     carouselVideo: {
         width: '100%',
-        height: 'auto',
+        height: '100%',
         display: 'block',
-        objectFit: 'cover'
+        objectFit: 'cover',
+        userSelect: 'none',
+        WebkitUserDrag: 'none'
     },
     carouselInfoSection: {
         width: '100%',
-        padding: '20px',
+        padding: '10px 20px',
         backgroundColor: '#000',
         color: '#fff',
         textAlign: 'center'
@@ -311,6 +321,8 @@ const StructurePage = (_a) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [carouselIndex, setCarouselIndex] = useState(0);
+    const [touchStart, setTouchStart] = useState(null);
+    const [touchEnd, setTouchEnd] = useState(null);
     const heroVideoRef = useRef(null);
     const carouselVideoRefs = useRef([]);
     const [isHeroVideoPaused, setIsHeroVideoPaused] = useState(false);
@@ -372,7 +384,7 @@ const StructurePage = (_a) => {
         }
         const config = multiCTAConfig[configKey];
         const styleKeys = [
-            'fontSize', 'color', 'textAlign', 'fontWeight',
+            'fontSize', 'color', 'textAlign', 'fontWeight', 'fontStyle', 'textDecoration',
             'backgroundColor', 'padding', 'margin', 'borderRadius',
             'showBorder', 'borderWidth', 'borderColor',
             'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
@@ -396,8 +408,16 @@ const StructurePage = (_a) => {
         if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
             customStyle.textAlign = styleConfig.textAlign;
         }
-        if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
-            customStyle.fontWeight = styleConfig.fontWeight;
+        if (styleConfig.fontWeight) {
+            customStyle.fontWeight = typeof styleConfig.fontWeight === 'number'
+                ? styleConfig.fontWeight
+                : styleConfig.fontWeight;
+        }
+        if (styleConfig.fontStyle && typeof styleConfig.fontStyle === 'string') {
+            customStyle.fontStyle = styleConfig.fontStyle;
+        }
+        if (styleConfig.textDecoration && typeof styleConfig.textDecoration === 'string') {
+            customStyle.textDecoration = styleConfig.textDecoration;
         }
         if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
             customStyle.backgroundColor = styleConfig.backgroundColor;
@@ -620,6 +640,34 @@ const StructurePage = (_a) => {
             setCarouselIndex((prev) => (prev === data.carouselSection.length - 1 ? 0 : prev + 1));
         }
     };
+    const handleTouchStart = (e) => {
+        setTouchEnd(null);
+        setTouchStart(e.targetTouches[0].clientX);
+    };
+    const handleTouchMove = (e) => {
+        if (!touchStart)
+            return;
+        const currentTouch = e.targetTouches[0].clientX;
+        setTouchEnd(currentTouch);
+        const distance = Math.abs(touchStart - currentTouch);
+        if (distance > 10) {
+            e.preventDefault();
+        }
+    };
+    const handleTouchEnd = () => {
+        if (!touchStart || !touchEnd)
+            return;
+        const distance = touchStart - touchEnd;
+        const minSwipeDistance = 50;
+        if (distance > minSwipeDistance) {
+            handleCarouselNext();
+        }
+        else if (distance < -minSwipeDistance) {
+            handleCarouselPrev();
+        }
+        setTouchStart(null);
+        setTouchEnd(null);
+    };
     if (loading) {
         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..."));
     }
@@ -640,14 +688,14 @@ const StructurePage = (_a) => {
                     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,
                 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))))),
         data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
-            React.createElement("div", { style: baseStyles.carouselImageContainer },
+            React.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
                 React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
                     var _a;
                     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) },
                         React.createElement("video", { ref: (el) => {
                                 carouselVideoRefs.current[index] = el;
-                            }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false }),
-                        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));
+                            }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault() }),
+                        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));
                 })),
                 React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
                 React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
@@ -658,7 +706,8 @@ const StructurePage = (_a) => {
             React.createElement("div", { style: baseStyles.highlightImageContainer },
                 React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
             React.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
-                React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
+                data.highlightRevealSection.text && (React.createElement("div", { style: { marginBottom: '10px' } },
+                    React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.text))),
                 renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
         data.productGridSection && data.productGridSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
             const gridItems = [null, null, null, null, null, null];
@@ -700,7 +749,10 @@ const StructurePage = (_a) => {
             });
         })())),
         data.footerSection && (React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
-            React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
+            React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') },
+                data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
+                    React.createElement("div", { style: mergeStyles(baseStyles.footerText, 'footerSection') }, data.footerSection.text))),
+                renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
             React.createElement("div", { style: baseStyles.footerImageContainer },
                 React.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
 };

package/lib/core/components/StructurePage/index.js

@@ -83,38 +83,48 @@ const baseStyles = {
     },
     carouselSection: {
         width: '100%',
-        position: 'relative'
+        position: 'relative',
+        padding: '20px'
     },
     carouselImageContainer: {
         width: '100%',
-        height: 'auto',
+        maxWidth: '100%',
+        margin: '0 auto',
         position: 'relative',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        aspectRatio: '9 / 16',
+        touchAction: 'pan-y pinch-zoom'
     },
     carouselContainer: {
         display: 'flex',
-        transition: 'transform 0.5s ease-in-out',
-        width: '100%'
+        transition: 'transform 0.3s ease-out',
+        width: '100%',
+        height: '100%'
     },
     carouselSlide: {
         minWidth: '100%',
+        height: '100%',
         position: 'relative'
     },
     carouselImage: {
         width: '100%',
-        height: 'auto',
+        height: '100%',
         display: 'block',
-        objectFit: 'cover'
+        objectFit: 'cover',
+        userSelect: 'none',
+        WebkitUserDrag: 'none'
     },
     carouselVideo: {
         width: '100%',
-        height: 'auto',
+        height: '100%',
         display: 'block',
-        objectFit: 'cover'
+        objectFit: 'cover',
+        userSelect: 'none',
+        WebkitUserDrag: 'none'
     },
     carouselInfoSection: {
         width: '100%',
-        padding: '20px',
+        padding: '10px 20px',
         backgroundColor: '#000',
         color: '#fff',
         textAlign: 'center'
@@ -313,6 +323,8 @@ const StructurePage = (_a) => {
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     const [carouselIndex, setCarouselIndex] = (0, react_1.useState)(0);
+    const [touchStart, setTouchStart] = (0, react_1.useState)(null);
+    const [touchEnd, setTouchEnd] = (0, react_1.useState)(null);
     const heroVideoRef = (0, react_1.useRef)(null);
     const carouselVideoRefs = (0, react_1.useRef)([]);
     const [isHeroVideoPaused, setIsHeroVideoPaused] = (0, react_1.useState)(false);
@@ -374,7 +386,7 @@ const StructurePage = (_a) => {
         }
         const config = multiCTAConfig[configKey];
         const styleKeys = [
-            'fontSize', 'color', 'textAlign', 'fontWeight',
+            'fontSize', 'color', 'textAlign', 'fontWeight', 'fontStyle', 'textDecoration',
             'backgroundColor', 'padding', 'margin', 'borderRadius',
             'showBorder', 'borderWidth', 'borderColor',
             'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
@@ -398,8 +410,16 @@ const StructurePage = (_a) => {
         if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
             customStyle.textAlign = styleConfig.textAlign;
         }
-        if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
-            customStyle.fontWeight = styleConfig.fontWeight;
+        if (styleConfig.fontWeight) {
+            customStyle.fontWeight = typeof styleConfig.fontWeight === 'number'
+                ? styleConfig.fontWeight
+                : styleConfig.fontWeight;
+        }
+        if (styleConfig.fontStyle && typeof styleConfig.fontStyle === 'string') {
+            customStyle.fontStyle = styleConfig.fontStyle;
+        }
+        if (styleConfig.textDecoration && typeof styleConfig.textDecoration === 'string') {
+            customStyle.textDecoration = styleConfig.textDecoration;
         }
         if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
             customStyle.backgroundColor = styleConfig.backgroundColor;
@@ -622,6 +642,34 @@ const StructurePage = (_a) => {
             setCarouselIndex((prev) => (prev === data.carouselSection.length - 1 ? 0 : prev + 1));
         }
     };
+    const handleTouchStart = (e) => {
+        setTouchEnd(null);
+        setTouchStart(e.targetTouches[0].clientX);
+    };
+    const handleTouchMove = (e) => {
+        if (!touchStart)
+            return;
+        const currentTouch = e.targetTouches[0].clientX;
+        setTouchEnd(currentTouch);
+        const distance = Math.abs(touchStart - currentTouch);
+        if (distance > 10) {
+            e.preventDefault();
+        }
+    };
+    const handleTouchEnd = () => {
+        if (!touchStart || !touchEnd)
+            return;
+        const distance = touchStart - touchEnd;
+        const minSwipeDistance = 50;
+        if (distance > minSwipeDistance) {
+            handleCarouselNext();
+        }
+        else if (distance < -minSwipeDistance) {
+            handleCarouselPrev();
+        }
+        setTouchStart(null);
+        setTouchEnd(null);
+    };
     if (loading) {
         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..."));
     }
@@ -642,14 +690,14 @@ const StructurePage = (_a) => {
                     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,
                 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))))),
         data.carouselSection && data.carouselSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
-            react_1.default.createElement("div", { style: baseStyles.carouselImageContainer },
+            react_1.default.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
                 react_1.default.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
                     var _a;
                     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) },
                         react_1.default.createElement("video", { ref: (el) => {
                                 carouselVideoRefs.current[index] = el;
-                            }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false }),
-                        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));
+                            }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault() }),
+                        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));
                 })),
                 react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
                 react_1.default.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
@@ -660,7 +708,8 @@ const StructurePage = (_a) => {
             react_1.default.createElement("div", { style: baseStyles.highlightImageContainer },
                 react_1.default.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
             react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
-                react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
+                data.highlightRevealSection.text && (react_1.default.createElement("div", { style: { marginBottom: '10px' } },
+                    react_1.default.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.text))),
                 renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
         data.productGridSection && data.productGridSection.length > 0 && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
             const gridItems = [null, null, null, null, null, null];
@@ -702,7 +751,10 @@ const StructurePage = (_a) => {
             });
         })())),
         data.footerSection && (react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
-            react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
+            react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') },
+                data.footerSection.text && (react_1.default.createElement("div", { style: { marginBottom: '15px' } },
+                    react_1.default.createElement("div", { style: mergeStyles(baseStyles.footerText, 'footerSection') }, data.footerSection.text))),
+                renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
             react_1.default.createElement("div", { style: baseStyles.footerImageContainer },
                 react_1.default.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.20.29",
+  "version": "1.20.31",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",