@shopgate/engage 7.29.7-alpha.1 → 7.30.0-alpha.10

package/page/widgets/HTML/HTML.js

@@ -1,5 +1,92 @@
-import React from'react';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/engage';import{useHtmlWidget}from"./hooks";var colors=themeConfig.colors;var useStyles=makeStyles()({root:{' h1, h2, h3, h4, h5, h6, p, ul, ol':{margin:'1rem 0'},' h1, h2, h3, h4, h5, h6':{fontWeight:600},' h1':{fontSize:'1.5rem'},' h2':{fontSize:'1.25rem'},' h3':{fontSize:'1.1rem'},' h4, h5, h6':{fontSize:'1rem'},' ol, ul':{paddingLeft:'1rem'},' ol > li':{listStyle:'decimal'},' ul > li':{listStyle:'disc'},' img':{display:'initial'},' img[style*="float: left"], img[style*="float:left"], img.pull-left':{marginRight:'1rem'},' img[style*="float: right"], img[style*="float:right"], img.pull-right':{marginLeft:'1rem'},' code, pre':{whiteSpace:'pre-wrap'},' blockquote, q':{paddingLeft:'1rem',margin:'2rem 0',borderLeft:".25rem solid ".concat(colors.shade6),fontStyle:'italic'},' > :first-child':{marginTop:0},// Clearfix for floated widget content
-':after':{clear:'both',content:'.',display:'block',visibility:'hidden',height:0},a:{color:'var(--color-primary)'}}});/**
+import React from 'react';
+import { HtmlSanitizer } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/engage';
+import { useHtmlWidget } from "./hooks";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()({
+  root: {
+    ' h1, h2, h3, h4, h5, h6, p, ul, ol': {
+      margin: '1rem 0'
+    },
+    ' h1, h2, h3, h4, h5, h6': {
+      fontWeight: 600
+    },
+    ' h1': {
+      fontSize: '1.5rem'
+    },
+    ' h2': {
+      fontSize: '1.25rem'
+    },
+    ' h3': {
+      fontSize: '1.1rem'
+    },
+    ' h4, h5, h6': {
+      fontSize: '1rem'
+    },
+    ' ol, ul': {
+      paddingLeft: '1rem'
+    },
+    ' ol > li': {
+      listStyle: 'decimal'
+    },
+    ' ul > li': {
+      listStyle: 'disc'
+    },
+    ' img': {
+      display: 'initial'
+    },
+    ' img[style*="float: left"], img[style*="float:left"], img.pull-left': {
+      marginRight: '1rem'
+    },
+    ' img[style*="float: right"], img[style*="float:right"], img.pull-right': {
+      marginLeft: '1rem'
+    },
+    ' code, pre': {
+      whiteSpace: 'pre-wrap'
+    },
+    ' blockquote, q': {
+      paddingLeft: '1rem',
+      margin: '2rem 0',
+      borderLeft: `.25rem solid ${colors.shade6}`,
+      fontStyle: 'italic'
+    },
+    ' > :first-child/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */': {
+      marginTop: 0
+    },
+    // Clearfix for floated widget content
+    ':after': {
+      clear: 'both',
+      content: '"."',
+      display: 'block',
+      visibility: 'hidden',
+      height: 0
+    },
+    a: {
+      color: 'var(--color-primary)'
+    }
+  }
+});
+
+/**
  * The HtmlWidget component is used to display html code.
  * @returns {JSX.Element}
- */var HtmlWidget=function HtmlWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useHtmlWidget=useHtmlWidget(),html=_useHtmlWidget.html;return React.createElement(HtmlSanitizer,{settings:{html:html},processStyles:true,className:classes.root},html);};export default HtmlWidget;
+ */
+const HtmlWidget = () => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    html
+  } = useHtmlWidget();
+  return /*#__PURE__*/React.createElement(HtmlSanitizer, {
+    settings: {
+      html
+    },
+    processStyles: true,
+    className: classes.root
+  }, html);
+};
+export default HtmlWidget;

package/page/widgets/HTML/hooks.js

@@ -1,12 +1,30 @@
-import{useWidget}from'@shopgate/engage/page/hooks';/**
+import { useWidget } from '@shopgate/engage/page/hooks';
+
+/**
  * @typedef {Object} HtmlWidgetConfig
  * @property {string} [html] - The HTML content to render.
  * @property {string} [internalDescription] - Internal description for the widget.
- */ /**
+ */
+
+/**
  * @typedef {Object} UseHtmlWidgetReturnType
  * @property {string} [html] - The HTML content to render.
  * @property {string} [internalDescription] - Internal description for the widget.
- */ /**
+ */
+
+/**
  * Hook to access the html widget configuration.
  * @returns {UseHtmlWidgetReturnType} the html widget configuration
- */export var useHtmlWidget=function useHtmlWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var html=config.html;return{html:html};};
+ */
+export const useHtmlWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config
+  } = useWidget();
+  const {
+    html
+  } = config;
+  return {
+    html
+  };
+};

package/page/widgets/HTML/index.js

@@ -1 +1 @@
-export{default}from"./HTML";
+export { default } from "./HTML";

package/page/widgets/Headline/Headline.js

@@ -1,4 +1,21 @@
-import React from'react';import WidgetHeadline from"../../components/WidgetHeadline";import{useWidget}from"../../hooks";/**
+import React from 'react';
+import WidgetHeadline from "../../components/WidgetHeadline";
+import { useWidget } from "../../hooks";
+
+/**
  * The HeadlineWidget is used to display a headline text.
  * @returns {JSX.Element}
- */var Headline=function Headline(){var _useWidget=useWidget(),config=_useWidget.config;var headline=config.headline;if(!headline)return null;return React.createElement(WidgetHeadline,{headline:headline});};export default Headline;
+ */
+const Headline = () => {
+  const {
+    config
+  } = useWidget();
+  const {
+    headline
+  } = config;
+  if (!headline) return null;
+  return /*#__PURE__*/React.createElement(WidgetHeadline, {
+    headline: headline
+  });
+};
+export default Headline;

package/page/widgets/Headline/index.js

@@ -1 +1 @@
-export{default}from"./Headline";
+export { default } from "./Headline";

package/page/widgets/HeroBanner/HeroBanner.js

@@ -1,3 +1,93 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{useCallback,useState,useMemo}from'react';import{ConditionalWrapper,Link}from'@shopgate/engage/components';import{WidgetRichText,ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{makeStyles}from'@shopgate/engage/styles';import{useHeroBannerWidget}from"./hooks";import WidgetVideo from"../../components/WidgetVideo";var useStyles=makeStyles()(function(theme){return{link:{width:'100%'},content:_defineProperty(_defineProperty({width:'100%',position:'relative',display:'flex',alignItems:'center',minHeight:300},theme.breakpoints.up('md'),{minHeight:400}),"overflow",'hidden'),richText:{position:'relative',zIndex:2,padding:theme.spacing(2)},imageContainer:{position:'absolute',width:'100%',height:'100%',top:0,left:0}};});/**
+import React, { useCallback, useState, useMemo } from 'react';
+import { ConditionalWrapper, Link } from '@shopgate/engage/components';
+import { WidgetRichText, ResponsiveWidgetImage } from '@shopgate/engage/page/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useHeroBannerWidget } from "./hooks";
+import WidgetVideo from "../../components/WidgetVideo";
+const useStyles = makeStyles()(theme => ({
+  link: {
+    width: '100%'
+  },
+  content: {
+    width: '100%',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: 300,
+    [theme.breakpoints.up('md')]: {
+      minHeight: 400
+    },
+    overflow: 'hidden'
+  },
+  richText: {
+    position: 'relative',
+    zIndex: 2,
+    padding: theme.spacing(2)
+  },
+  imageContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0
+  }
+}));
+
+/**
  * @returns {JSX.Element}
- */var HeroBanner=function HeroBanner(){var _useHeroBannerWidget=useHeroBannerWidget(),text=_useHeroBannerWidget.text,altText=_useHeroBannerWidget.altText,link=_useHeroBannerWidget.link,borderRadius=_useHeroBannerWidget.borderRadius,parallax=_useHeroBannerWidget.parallax,_useHeroBannerWidget$=_useHeroBannerWidget.imageFit,imageFit=_useHeroBannerWidget$===void 0?'fillAndCrop':_useHeroBannerWidget$,mediaType=_useHeroBannerWidget.mediaType,mediaUrl=_useHeroBannerWidget.mediaUrl;var _useStyles=useStyles(),classes=_useStyles.classes;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),aspectRatio=_useState2[0],setAspectRatio=_useState2[1];var contentStyle=useMemo(function(){if(imageFit!=='showFull'){return null;}return{aspectRatio:aspectRatio,minHeight:'unset'};},[aspectRatio,imageFit]);var handleImageRatioChange=useCallback(function(ratio){setAspectRatio(ratio);},[]);return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:classes.link},children);}},React.createElement("div",{className:classes.content,style:contentStyle},React.createElement(WidgetRichText,{content:text,className:classes.richText}),React.createElement("div",{className:classes.imageContainer},mediaType==='image'?React.createElement(ResponsiveWidgetImage,{src:mediaUrl,alt:altText,borderRadius:borderRadius,enableParallax:parallax,isBanner:imageFit==='fillAndCrop',onImageRatioChange:handleImageRatioChange}):null,mediaType==='video'?React.createElement(WidgetVideo,{isBanner:true,url:mediaUrl,borderRadius:borderRadius}):null)));};export default HeroBanner;
+ */
+const HeroBanner = () => {
+  const {
+    text,
+    altText,
+    link,
+    borderRadius,
+    parallax,
+    imageFit = 'fillAndCrop',
+    mediaType,
+    mediaUrl
+  } = useHeroBannerWidget();
+  const {
+    classes
+  } = useStyles();
+  const [aspectRatio, setAspectRatio] = useState(null);
+  const contentStyle = useMemo(() => {
+    if (imageFit !== 'showFull') {
+      return null;
+    }
+    return {
+      aspectRatio,
+      minHeight: 'unset'
+    };
+  }, [aspectRatio, imageFit]);
+  const handleImageRatioChange = useCallback(ratio => {
+    setAspectRatio(ratio);
+  }, []);
+  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: !!link,
+    wrapper: children => /*#__PURE__*/React.createElement(Link, {
+      href: link,
+      className: classes.link
+    }, children)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.content,
+    style: contentStyle
+  }, /*#__PURE__*/React.createElement(WidgetRichText, {
+    content: text,
+    className: classes.richText
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.imageContainer
+  }, mediaType === 'image' ? /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
+    src: mediaUrl,
+    alt: altText,
+    borderRadius: borderRadius,
+    enableParallax: parallax,
+    isBanner: imageFit === 'fillAndCrop',
+    onImageRatioChange: handleImageRatioChange
+  }) : null, mediaType === 'video' ? /*#__PURE__*/React.createElement(WidgetVideo, {
+    isBanner: true,
+    url: mediaUrl,
+    borderRadius: borderRadius
+  }) : null)));
+};
+export default HeroBanner;

package/page/widgets/HeroBanner/hooks.js

@@ -1,4 +1,7 @@
-var _excluded=["borderRadius","borderRadiusCustom","mediaType","backgroundImage","url"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import{useWidget}from'@shopgate/engage/page/hooks';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
+
+/**
  * @typedef {Object} HeroBanner
  * @property {string} text Banner text content
  * @property {string} link Optional banner link
@@ -11,10 +14,45 @@ var _excluded=["borderRadius","borderRadiusCustom","mediaType","backgroundImage"
  * @property {"fillAndCrop"|"showFull"} imageFit How the image should be displayed
  * @property {"image"|"video"} mediaType The type of media to display
  * @property {string} url The URL of the media to display
- */ /**
+ */
+
+/**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<HeroBanner> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the hero banner widget configuration and data.
- */export var useHeroBannerWidget=function useHeroBannerWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,_ref$mediaType=_ref.mediaType,mediaType=_ref$mediaType===void 0?'image':_ref$mediaType,backgroundImage=_ref.backgroundImage,url=_ref.url,rest=_objectWithoutProperties(_ref,_excluded);var mediaUrl;if(mediaType==='video'){mediaUrl=url;}else if(mediaType==='image'){mediaUrl=backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url;}var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return _extends({},rest,{mediaType:mediaType,mediaUrl:mediaUrl,altText:(backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt)||'',borderRadius:borderRadiusResolved});};
+ */
+export const useHeroBannerWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config
+  } = useWidget();
+  const {
+    borderRadius,
+    borderRadiusCustom,
+    mediaType = 'image',
+    backgroundImage,
+    url,
+    ...rest
+  } = config || {};
+  let mediaUrl;
+  if (mediaType === 'video') {
+    mediaUrl = url;
+  } else if (mediaType === 'image') {
+    mediaUrl = backgroundImage?.url;
+  }
+  const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
+    borderRadius,
+    borderRadiusCustom
+  });
+  return {
+    ...rest,
+    mediaType,
+    mediaUrl,
+    altText: backgroundImage?.alt || '',
+    borderRadius: borderRadiusResolved
+  };
+};

package/page/widgets/HeroBanner/index.js

@@ -1 +1 @@
-export{default}from"./HeroBanner";
+export { default } from "./HeroBanner";

package/page/widgets/Image/Image.js

@@ -1,4 +1,43 @@
-import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageWidget}from"./hooks";var useStyles=makeStyles()({link:{},image:{width:'100%'}});/**
+import React from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { Link, ConditionalWrapper } from '@shopgate/engage/components';
+import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
+import { useImageWidget } from "./hooks";
+const useStyles = makeStyles()({
+  link: {},
+  image: {
+    width: '100%'
+  }
+});
+/**
  * The ImageWidget is used to display a image.
  * @returns {JSX.Element}
- */var Image=function Image(){var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;var _useImageWidget=useImageWidget(),link=_useImageWidget.link,altText=_useImageWidget.altText,url=_useImageWidget.url,borderRadius=_useImageWidget.borderRadius,parallax=_useImageWidget.parallax;if(!url)return null;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement(ResponsiveWidgetImage,{src:url,alt:altText,className:cx(classes.image),borderRadius:borderRadius,enableParallax:parallax}));};export default Image;
+ */
+const Image = () => {
+  const {
+    cx,
+    classes
+  } = useStyles();
+  const {
+    link,
+    altText,
+    url,
+    borderRadius,
+    parallax
+  } = useImageWidget();
+  if (!url) return null;
+  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: !!link,
+    wrapper: children => /*#__PURE__*/React.createElement(Link, {
+      href: link,
+      className: cx(classes.link)
+    }, children)
+  }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
+    src: url,
+    alt: altText,
+    className: cx(classes.image),
+    borderRadius: borderRadius,
+    enableParallax: parallax
+  }));
+};
+export default Image;

package/page/widgets/Image/hooks.js

@@ -1,4 +1,8 @@
-import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}from'@shopgate/engage/styles';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { useResponsiveValue } from '@shopgate/engage/styles';
+import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
+
+/**
  * @typedef {Object} ImageWidgetConfig
  * @property {Object} image The image object.
  * @property {string} image.url The image URL.
@@ -12,11 +16,51 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}fro
  * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * @property {boolean} [parallax] Whether to apply a parallax effect to the image.
- */ /**
+ */
+
+/**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Image widget configuration and data.
  * Handles responsive image URLs and alt texts.
- */export var useImageWidget=function useImageWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},image=_ref.image,imageWide=_ref.imageWide,link=_ref.link,useImageWide=_ref.useImageWide,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,parallax=_ref.parallax;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var resolved=useResponsiveValue({xs:{url:image===null||image===void 0?void 0:image.url,altText:image===null||image===void 0?void 0:image.altText},md:{url:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.url)?imageWide.url:image===null||image===void 0?void 0:image.url,altText:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.altText)?imageWide.altText:image===null||image===void 0?void 0:image.altText}});return{url:resolved.url,altText:resolved.altText,link:link,borderRadius:borderRadiusResolved,parallax:parallax};};
+ */
+export const useImageWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config
+  } = useWidget();
+  const {
+    image,
+    imageWide,
+    link,
+    useImageWide,
+    borderRadius,
+    borderRadiusCustom,
+    parallax
+  } = config || {};
+  const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
+    borderRadius,
+    borderRadiusCustom
+  });
+  const resolved = useResponsiveValue({
+    xs: {
+      url: image?.url,
+      altText: image?.altText
+    },
+    md: {
+      url: useImageWide && imageWide?.url ? imageWide.url : image?.url,
+      altText: useImageWide && imageWide?.altText ? imageWide.altText : image?.altText
+    }
+  });
+  return {
+    url: resolved.url,
+    altText: resolved.altText,
+    link,
+    borderRadius: borderRadiusResolved,
+    parallax
+  };
+};

package/page/widgets/Image/index.js

@@ -1 +1 @@
-export{default}from"./Image";
+export { default } from "./Image";

package/page/widgets/ImageRow/ImageRow.js

@@ -1,4 +1,111 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Link,ConditionalWrapper,Grid}from'@shopgate/engage/components';import{useImageRowWidget}from"./hooks";import ResponsiveWidgetImage from"../../components/ResponsiveWidgetImage";var useStyles=makeStyles()(function(theme,_ref){var imageSpacing=_ref.imageSpacing,slidesPerViewCustomLarge=_ref.slidesPerViewCustomLarge,slidesPerViewCustomMedium=_ref.slidesPerViewCustomMedium,slidesPerViewCustomSmall=_ref.slidesPerViewCustomSmall;return{imageContainer:{width:'100%',display:'flex',overflowX:'hidden',alignItems:'flex-start',flexWrap:'wrap',gap:"".concat(imageSpacing,"px")},image:{maxWidth:'100%',height:'auto',flexShrink:1,display:'block',width:'100%',objectFit:'contain'},itemContainerDense:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:"1 1 calc(33% - ".concat(imageSpacing,"px)")}),theme.breakpoints.up('md'),{flex:"1 1 calc(16% - ".concat(imageSpacing,"px)")}),itemContainerDefault:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:"1 1 calc(50% - ".concat(imageSpacing,"px)")}),theme.breakpoints.up('md'),{flex:"1 1 calc(25% - ".concat(imageSpacing,"px)")}),itemContainerNoWrap:{flex:' 1 1 0%'},imageContainerCustom:_defineProperty(_defineProperty(_defineProperty({},theme.breakpoints.up('lg'),{flex:"1 1 calc(".concat(100/slidesPerViewCustomLarge,"% - ").concat(imageSpacing,"px)")}),theme.breakpoints.between('sm','lg'),{flex:"1 1 calc(".concat(100/slidesPerViewCustomMedium,"% - ").concat(imageSpacing,"px)")}),theme.breakpoints.down('sm'),{flex:"1 1 calc(".concat(100/slidesPerViewCustomSmall,"% - ").concat(imageSpacing,"px)")})};});/**
+import React from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { Link, ConditionalWrapper, Grid } from '@shopgate/engage/components';
+import { useImageRowWidget } from "./hooks";
+import ResponsiveWidgetImage from "../../components/ResponsiveWidgetImage";
+const useStyles = makeStyles()((theme, {
+  imageSpacing,
+  slidesPerViewCustomLarge,
+  slidesPerViewCustomMedium,
+  slidesPerViewCustomSmall
+}) => ({
+  imageContainer: {
+    width: '100%',
+    display: 'flex',
+    overflowX: 'hidden',
+    alignItems: 'flex-start',
+    flexWrap: 'wrap',
+    gap: `${imageSpacing}px`
+  },
+  image: {
+    maxWidth: '100%',
+    height: 'auto',
+    flexShrink: 1,
+    display: 'block',
+    width: '100%',
+    objectFit: 'contain'
+  },
+  itemContainerDense: {
+    [theme.breakpoints.down('md')]: {
+      flex: `1 1 calc(33% - ${imageSpacing}px)`
+    },
+    [theme.breakpoints.up('md')]: {
+      flex: `1 1 calc(16% - ${imageSpacing}px)`
+    }
+  },
+  itemContainerDefault: {
+    [theme.breakpoints.down('md')]: {
+      flex: `1 1 calc(50% - ${imageSpacing}px)`
+    },
+    [theme.breakpoints.up('md')]: {
+      flex: `1 1 calc(25% - ${imageSpacing}px)`
+    }
+  },
+  itemContainerNoWrap: {
+    flex: ' 1 1 0%'
+  },
+  imageContainerCustom: {
+    [theme.breakpoints.up('lg')]: {
+      flex: `1 1 calc(${100 / slidesPerViewCustomLarge}% - ${imageSpacing}px)`
+    },
+    [theme.breakpoints.between('sm', 'lg')]: {
+      flex: `1 1 calc(${100 / slidesPerViewCustomMedium}% - ${imageSpacing}px)`
+    },
+    [theme.breakpoints.down('sm')]: {
+      flex: `1 1 calc(${100 / slidesPerViewCustomSmall}% - ${imageSpacing}px)`
+    }
+  }
+}));
+
+/**
  * The ImageRowWidget is used to display images in one or more rows.
  * @returns {JSX.Element}
- */var ImageRow=function ImageRow(){var _useImageRowWidget=useImageRowWidget(),images=_useImageRowWidget.images,_useImageRowWidget$im=_useImageRowWidget.imageWrapping,imageWrapping=_useImageRowWidget$im===void 0?'responsiveDefault':_useImageRowWidget$im,imageSpacing=_useImageRowWidget.imageSpacing,borderRadius=_useImageRowWidget.borderRadius,parallax=_useImageRowWidget.parallax,slidesPerViewCustomLarge=_useImageRowWidget.slidesPerViewCustomLarge,slidesPerViewCustomMedium=_useImageRowWidget.slidesPerViewCustomMedium,slidesPerViewCustomSmall=_useImageRowWidget.slidesPerViewCustomSmall;var _useStyles=useStyles({imageSpacing:imageSpacing,slidesPerViewCustomLarge:slidesPerViewCustomLarge,slidesPerViewCustomMedium:slidesPerViewCustomMedium,slidesPerViewCustomSmall:slidesPerViewCustomSmall}),cx=_useStyles.cx,classes=_useStyles.classes;if(!images||images.length===0)return null;return React.createElement(Grid,{className:classes.imageContainer,component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'),classes.imageContainerCustom,imageWrapping==='responsiveCustom'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:classes.image},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:classes.image,borderRadius:borderRadius,enableParallax:parallax})));}));};export default ImageRow;
+ */
+const ImageRow = () => {
+  const {
+    images,
+    imageWrapping = 'responsiveDefault',
+    imageSpacing,
+    borderRadius,
+    parallax,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
+  } = useImageRowWidget();
+  const {
+    cx,
+    classes
+  } = useStyles({
+    imageSpacing,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
+  });
+  if (!images || images.length === 0) return null;
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: classes.imageContainer,
+    component: "div"
+  }, images.map(img => /*#__PURE__*/React.createElement(Grid.Item, {
+    key: img.url,
+    component: "div",
+    className: cx({
+      [classes.itemContainerDefault]: imageWrapping === 'responsiveDefault',
+      [classes.itemContainerDense]: imageWrapping === 'responsiveDense',
+      [classes.itemContainerNoWrap]: imageWrapping === 'responsiveNoWrap',
+      [classes.imageContainerCustom]: imageWrapping === 'responsiveCustom'
+    })
+  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: !!img.link,
+    wrapper: children => /*#__PURE__*/React.createElement(Link, {
+      href: img.link,
+      className: classes.image
+    }, children)
+  }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
+    src: img.url,
+    alt: img.altText,
+    className: classes.image,
+    borderRadius: borderRadius,
+    enableParallax: parallax
+  })))));
+};
+export default ImageRow;

package/page/widgets/ImageRow/hooks.js

@@ -1,4 +1,8 @@
-import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { useMemo } from 'react';
+import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
+
+/**
  * @typedef {Object} ImageRowWidgetConfig
  * @property {Array} images The images array.
  * @property {string} imageWrapping The imageWrapping setting,
@@ -14,11 +18,60 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';im
  * (only for 'responsiveCustom' wrapping).
  * @property {number} [slidesPerViewCustomSmall] Number of slides to show on small screens
  * (only for 'responsiveCustom' wrapping).
- */ /**
+ */
+
+/**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageRowWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Image row widget configuration and data.
  * Handles responsive image URLs and alt texts.
- */export var useImageRowWidget=function useImageRowWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},_ref$images=_ref.images,images=_ref$images===void 0?[]:_ref$images,imageWrapping=_ref.imageWrapping,_ref$imageSpacing=_ref.imageSpacing,imageSpacing=_ref$imageSpacing===void 0?0:_ref$imageSpacing,borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,parallax=_ref.parallax,slidesPerViewCustomLarge=_ref.slidesPerViewCustomLarge,slidesPerViewCustomMedium=_ref.slidesPerViewCustomMedium,slidesPerViewCustomSmall=_ref.slidesPerViewCustomSmall;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var mappedImages=useMemo(function(){return images.map(function(_ref2){var image=_ref2.image,link=_ref2.link;var _ref3=image||{},url=_ref3.url,altText=_ref3.altText;return{url:url,altText:altText,link:link};}).filter(function(img){return img.url;});},[images]);return{images:mappedImages,imageWrapping:imageWrapping,imageSpacing:imageSpacing,borderRadius:borderRadiusResolved,parallax:parallax,slidesPerViewCustomLarge:slidesPerViewCustomLarge,slidesPerViewCustomMedium:slidesPerViewCustomMedium,slidesPerViewCustomSmall:slidesPerViewCustomSmall};};
+ */
+export const useImageRowWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config
+  } = useWidget();
+  const {
+    images = [],
+    imageWrapping,
+    imageSpacing = 0,
+    borderRadius,
+    borderRadiusCustom,
+    parallax,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
+  } = config || {};
+  const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
+    borderRadius,
+    borderRadiusCustom
+  });
+  const mappedImages = useMemo(() => images.map(({
+    image,
+    link
+  }) => {
+    const {
+      url,
+      altText
+    } = image || {};
+    return {
+      url,
+      altText,
+      link
+    };
+  }).filter(img => img.url), [images]);
+  return {
+    images: mappedImages,
+    imageWrapping,
+    imageSpacing,
+    borderRadius: borderRadiusResolved,
+    parallax,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
+  };
+};

package/page/widgets/ImageRow/index.js

@@ -1 +1 @@
-export{default}from"./ImageRow";
+export { default } from "./ImageRow";