@shopgate/engage 7.29.0-alpha.14 → 7.29.0-alpha.16

package/components/Typography/Typography.js

@@ -8,4 +8,4 @@ var _excluded=["align","className","color","component","display","gutterBottom",
  * Creates the styles for the Typography component.
  * @param {Theme} theme The theme object.
  * @returns {Object} The styles object.
- */export var styles=function styles(theme){return{/* Styles applied to the root element. */root:{margin:0},/* Styles applied to the root element if `variant="body2"`. */body2:theme.typography.body2,/* Styles applied to the root element if `variant="body1"`. */body1:theme.typography.body1,/* Styles applied to the root element if `variant="caption"`. */caption:theme.typography.caption,/* Styles applied to the root element if `variant="button"`. */button:theme.typography.button,/* Styles applied to the root element if `variant="h1"`. */h1:theme.typography.h1,/* Styles applied to the root element if `variant="h2"`. */h2:theme.typography.h2,/* Styles applied to the root element if `variant="h3"`. */h3:theme.typography.h3,/* Styles applied to the root element if `variant="h4"`. */h4:theme.typography.h4,/* Styles applied to the root element if `variant="h5"`. */h5:theme.typography.h5,/* Styles applied to the root element if `variant="h6"`. */h6:theme.typography.h6,/* Styles applied to the root element if `variant="subtitle1"`. */subtitle1:theme.typography.subtitle1,/* Styles applied to the root element if `variant="subtitle2"`. */subtitle2:theme.typography.subtitle2,/* Styles applied to the root element if `variant="overline"`. */overline:theme.typography.overline,/* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */srOnly:{position:'absolute',height:1,width:1,overflow:'hidden'},/* Styles applied to the root element if `align="left"`. */alignLeft:{textAlign:'left'},/* Styles applied to the root element if `align="center"`. */alignCenter:{textAlign:'center'},/* Styles applied to the root element if `align="right"`. */alignRight:{textAlign:'right'},/* Styles applied to the root element if `align="justify"`. */alignJustify:{textAlign:'justify'},/* Styles applied to the root element if `nowrap={true}`. */noWrap:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'},/* Styles applied to the root element if `gutterBottom={true}`. */gutterBottom:{marginBottom:'0.35em'},/* Styles applied to the root element if `paragraph={true}`. */paragraph:{marginBottom:16},/* Styles applied to the root element if `color="inherit"`. */colorInherit:{color:'inherit'},/* Styles applied to the root element if `color="primary"`. */colorPrimary:{color:theme.palette.primary.main},/* Styles applied to the root element if `color="secondary"`. */colorSecondary:{color:theme.palette.secondary.main},/* Styles applied to the root element if `color="textPrimary"`. */colorTextPrimary:{color:theme.palette.text.primary},/* Styles applied to the root element if `color="textSecondary"`. */colorTextSecondary:{color:theme.palette.text.secondary},colorTextTertiary:{color:theme.palette.text.tertiary},/* Styles applied to the root element if `color="error"`. */colorError:{color:theme.palette.error.main},/* Styles applied to the root element if `color="warning"` */colorWarning:{color:theme.palette.warning.main},/* Styles applied to the root element if `color="success"` */colorSuccess:{color:theme.palette.success.main},/* Styles applied to the root element if `display="inline"`. */displayInline:{display:'inline'},/* Styles applied to the root element if `display="block"`. */displayBlock:{display:'block'}};};var defaultVariantMapping={h1:'h1',h2:'h2',h3:'h3',h4:'h4',h5:'h5',h6:'h6',subtitle1:'h6',subtitle2:'h6',body1:'p',body2:'p'};var Typography=React.forwardRef(function(props,ref){var _props$align=props.align,align=_props$align===void 0?'inherit':_props$align,className=props.className,_props$color=props.color,color=_props$color===void 0?'initial':_props$color,component=props.component,_props$display=props.display,display=_props$display===void 0?'initial':_props$display,_props$gutterBottom=props.gutterBottom,gutterBottom=_props$gutterBottom===void 0?false:_props$gutterBottom,_props$noWrap=props.noWrap,noWrap=_props$noWrap===void 0?false:_props$noWrap,_props$paragraph=props.paragraph,paragraph=_props$paragraph===void 0?false:_props$paragraph,_props$variant=props.variant,variant=_props$variant===void 0?'body1':_props$variant,_props$variantMapping=props.variantMapping,variantMapping=_props$variantMapping===void 0?defaultVariantMapping:_props$variantMapping,classes=props.classes,other=_objectWithoutProperties(props,_excluded);var Component=component||(paragraph?'p':variantMapping[variant]||defaultVariantMapping[variant])||'span';return React.createElement(Component,_extends({className:classNames(classes.root,_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes[variant],variant!=='inherit'),classes["color".concat(capitalize(color))],color!=='initial'),classes.noWrap,noWrap),classes.gutterBottom,gutterBottom),classes.paragraph,paragraph),classes["align".concat(capitalize(align))],align!=='inherit'),classes["display".concat(capitalize(display))],display!=='initial'),className),ref:ref},other));});Typography.defaultProps={align:'inherit',children:null,className:undefined,color:'initial',component:null,display:'initial',gutterBottom:false,noWrap:false,paragraph:false,variant:'body1',variantMapping:defaultVariantMapping};export default withStyles(Typography,styles,{name:'Typography'});
+ */export var styles=function styles(theme){return{/* Styles applied to the root element. */root:{margin:0},/* Styles applied to the root element if `variant="body2"`. */body2:theme.typography.body2,/* Styles applied to the root element if `variant="body1"`. */body1:theme.typography.body1,/* Styles applied to the root element if `variant="caption"`. */caption:theme.typography.caption,/* Styles applied to the root element if `variant="button"`. */button:theme.typography.button,/* Styles applied to the root element if `variant="h1"`. */h1:theme.typography.h1,/* Styles applied to the root element if `variant="h2"`. */h2:theme.typography.h2,/* Styles applied to the root element if `variant="h3"`. */h3:theme.typography.h3,/* Styles applied to the root element if `variant="h4"`. */h4:theme.typography.h4,/* Styles applied to the root element if `variant="h5"`. */h5:theme.typography.h5,/* Styles applied to the root element if `variant="h6"`. */h6:theme.typography.h6,/* Styles applied to the root element if `variant="subtitle1"`. */subtitle1:theme.typography.subtitle1,/* Styles applied to the root element if `variant="subtitle2"`. */subtitle2:theme.typography.subtitle2,/* Styles applied to the root element if `variant="overline"`. */overline:theme.typography.overline,/* Styles applied to the root element if `variant="srOnly"`. Only accessible to screen readers. */srOnly:{position:'absolute',height:1,width:1,overflow:'hidden'},/* Styles applied to the root element if `align="left"`. */alignLeft:{textAlign:'left'},/* Styles applied to the root element if `align="center"`. */alignCenter:{textAlign:'center'},/* Styles applied to the root element if `align="right"`. */alignRight:{textAlign:'right'},/* Styles applied to the root element if `align="justify"`. */alignJustify:{textAlign:'justify'},/* Styles applied to the root element if `nowrap={true}`. */noWrap:{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'},/* Styles applied to the root element if `gutterBottom={true}`. */gutterBottom:{marginBottom:'0.35em'},/* Styles applied to the root element if `paragraph={true}`. */paragraph:{marginBottom:16},/* Styles applied to the root element if `color="inherit"`. */colorInherit:{color:'inherit'},/* Styles applied to the root element if `color="primary"`. */colorPrimary:{color:theme.palette.primary.main},/* Styles applied to the root element if `color="secondary"`. */colorSecondary:{color:theme.palette.secondary.main},/* Styles applied to the root element if `color="textPrimary"`. */colorTextPrimary:{color:theme.palette.text.primary},/* Styles applied to the root element if `color="textSecondary"`. */colorTextSecondary:{color:theme.palette.text.secondary},colorTextTertiary:{color:theme.palette.text.tertiary},/* Styles applied to the root element if `color="error"`. */colorError:{color:theme.palette.error.main},/* Styles applied to the root element if `color="warning"` */colorWarning:{color:theme.palette.warning.main},/* Styles applied to the root element if `color="success"` */colorSuccess:{color:theme.palette.success.main},/* Styles applied to the root element if `display="inline"`. */displayInline:{display:'inline'},/* Styles applied to the root element if `display="block"`. */displayBlock:{display:'block'}};};var defaultVariantMapping={h1:'h1',h2:'h2',h3:'h3',h4:'h4',h5:'h5',h6:'h6',subtitle1:'h6',subtitle2:'h6',body1:'p',body2:'p'};var Typography=React.forwardRef(function(props,ref){var _props$align=props.align,align=_props$align===void 0?'inherit':_props$align,className=props.className,_props$color=props.color,color=_props$color===void 0?'initial':_props$color,component=props.component,_props$display=props.display,display=_props$display===void 0?'initial':_props$display,_props$gutterBottom=props.gutterBottom,gutterBottom=_props$gutterBottom===void 0?false:_props$gutterBottom,_props$noWrap=props.noWrap,noWrap=_props$noWrap===void 0?false:_props$noWrap,_props$paragraph=props.paragraph,paragraph=_props$paragraph===void 0?false:_props$paragraph,_props$variant=props.variant,variant=_props$variant===void 0?'body1':_props$variant,_props$variantMapping=props.variantMapping,variantMapping=_props$variantMapping===void 0?defaultVariantMapping:_props$variantMapping,classes=props.classes,other=_objectWithoutProperties(props,_excluded);var Component=component||(paragraph?'p':variantMapping[variant]||defaultVariantMapping[variant])||'span';return React.createElement(Component,_extends({className:classNames(classes.root,'engage__typography',_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},classes[variant],variant!=='inherit'),"engage__typography_".concat(variant),variant!=='inherit'),classes["color".concat(capitalize(color))],color!=='initial'),classes.noWrap,noWrap),classes.gutterBottom,gutterBottom),'engage__typography__gutter-bottom',gutterBottom),classes.paragraph,paragraph),"engage__typography__paragraph",paragraph),classes["align".concat(capitalize(align))],align!=='inherit'),classes["display".concat(capitalize(display))],display!=='initial'),className),ref:ref},other));});Typography.defaultProps={align:'inherit',children:null,className:undefined,color:'initial',component:null,display:'initial',gutterBottom:false,noWrap:false,paragraph:false,variant:'body1',variantMapping:defaultVariantMapping};export default withStyles(Typography,styles);

package/components/View/components/Content/components/ParallaxProvider/index.js

@@ -0,0 +1,19 @@
+import React,{useEffect,useContext,useMemo}from'react';import PropTypes from'prop-types';import{ParallaxProvider as ParallaxProviderCmp,useParallaxController}from'react-scroll-parallax';import{useElementSize}from'@shopgate/engage/core/hooks';import{useScrollContainer}from'@shopgate/engage/core/helpers';import{useReduceMotion}from'@shopgate/engage/a11y/hooks';import{ViewContext}from'@shopgate/engage/components/View';/**
+ * The ParallaxProviderInner component is used to update the parallax controller when the
+ * scroll height changes.
+ * @param {Object} props The component props.
+ * @param {number} props.scrollHeight The height of the scroll container.
+ * @param {Object} props.children The component children.
+ * @returns {JSX.Element}
+ */var ParallaxProviderInner=function ParallaxProviderInner(_ref){var scrollHeight=_ref.scrollHeight,children=_ref.children;var _useParallaxControlle=useParallaxController(),update=_useParallaxControlle.update;useEffect(function(){update();},[scrollHeight,update]);return children;};ParallaxProviderInner.propTypes={children:PropTypes.node.isRequired};/**
+ * The ParallaxProvider component wraps the parallax context from the react-scroll-parallax package
+ * around its children.
+ * @param {Object} props The component props.
+ * @param {boolean} props.viewVisible Whether the view is currently visible.
+ * @param {Object} props.children The component children.
+ * @returns {JSX.Element}
+ */var ParallaxProvider=function ParallaxProvider(_ref2){var viewVisible=_ref2.viewVisible,children=_ref2.children;var reduceMotion=useReduceMotion();// Determine if a scroll container is used. If false PWA is in curbside website mode and window
+// is used as scroll container.
+var scrollContainerUsed=useScrollContainer();var _useContext=useContext(ViewContext),viewRef=_useContext.contentRef;// Mocked ref for the useElementSize hook to track the size of the scroll container.
+var mockedElementSizeRef=useMemo(function(){var _viewRef$current;return{current:scrollContainerUsed?viewRef===null||viewRef===void 0?void 0:(_viewRef$current=viewRef.current)===null||_viewRef$current===void 0?void 0:_viewRef$current.querySelector('.engage__view__content__scrollable-content'):null};},[scrollContainerUsed,viewRef]);var _useElementSize=useElementSize(mockedElementSizeRef),height=_useElementSize.height;return React.createElement(ParallaxProviderCmp// For now Parallax is disabled when no scroll container is used.
+,{isDisabled:!scrollContainerUsed||reduceMotion||!viewVisible,scrollContainer:scrollContainerUsed?viewRef.current:null},React.createElement(ParallaxProviderInner,{scrollHeight:height},children));};export default ParallaxProvider;

package/components/View/components/Content/index.js

@@ -1,4 +1,4 @@
-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 _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import{container,containerInner}from"./style";/**
+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 _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component}from'react';import PropTypes from'prop-types';import Helmet from'react-helmet';import ResponsiveContainer from'@shopgate/engage/components/ResponsiveContainer';import appConfig from'@shopgate/pwa-common/helpers/config';import event from'@shopgate/pwa-core/classes/Event';import{router}from'@virtuous/conductor';import{RouteContext}from'@shopgate/pwa-common/context';import{EVENT_KEYBOARD_WILL_CHANGE}from'@shopgate/pwa-core/constants/AppEvents';import SurroundPortals from'@shopgate/pwa-common/components/SurroundPortals';import{VIEW_CONTENT}from'@shopgate/pwa-common/constants/Portals';import{useScrollContainer,isIOs}from'@shopgate/engage/core/helpers';import{ConditionalWrapper}from"../../../ConditionalWrapper";import Above from"../Above";import Below from"../Below";import ParallaxProvider from"./components/ParallaxProvider";import{container,containerInner}from"./style";/**
  * The ViewContent component.
  */var ViewContent=/*#__PURE__*/function(_Component){/**
    * @param {Object} props The component props.
@@ -27,4 +27,4 @@ window.requestAnimationFrame(function(){if(_this3.ref.current===window){window.s
 // is focused to prevent side effects (multiple scrollable content areas).
 '--extra-ios-scroll-space':isInputFocused?0:'12px',overflow:overflow};}},{key:"render",value:/**
    * @return {JSX.Element}
-   */function render(){return React.createElement("article",{className:"".concat(container," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement("div",{className:containerInner},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});
+   */function render(){return React.createElement(ParallaxProvider,{viewVisible:this.props.visible},React.createElement("article",{className:"".concat(container," engage__view__content ").concat(this.props.className),ref:this.scrollContainer?this.ref:null,style:this.style,role:"none"},React.createElement("div",{className:containerInner},React.createElement("div",{className:"engage__view__content__scrollable-content"},React.createElement(Helmet,{title:appConfig.shopName}),React.createElement(Above,null),React.createElement(ResponsiveContainer,{breakpoint:">xs",webOnly:true},this.props.visible?React.createElement("div",{id:"PageHeaderBelow"}):null),React.createElement(ConditionalWrapper,{condition:!this.props.noContentPortal,wrapper:function wrapper(children){return React.createElement(SurroundPortals,{portalName:VIEW_CONTENT},children);}},this.props.children),React.createElement(Below,null)))));}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(props,state){if(props.visible||state.keyboardHeight===0){return null;}return{keyboardHeight:0};}}]);}(Component);_defineProperty(ViewContent,"contextType",RouteContext);_defineProperty(ViewContent,"defaultProps",{className:'',children:null,noScrollOnKeyboard:false,noContentPortal:false,noKeyboardListener:false});export default(function(props){return React.createElement(RouteContext.Consumer,null,function(_ref2){var visible=_ref2.visible,_ref2$pattern=_ref2.pattern,pattern=_ref2$pattern===void 0?'':_ref2$pattern,_ref2$is=_ref2.is404,is404=_ref2$is===void 0?false:_ref2$is;return React.createElement(ViewContent,_extends({},props,{visible:visible,className:"route_".concat(is404?'404':pattern.replace(/[:/]/g,'_'))}));});});

package/core/helpers/getFullImageSource.js

@@ -22,6 +22,6 @@ import{CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL}from'@shopgate/engage/
  * @param {number} dimension.width Width in pixels.
  * @param {number} dimension.height Height in pixels.
  * @returns {string}
- */export var getFullImageSource=function getFullImageSource(src){var _ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services/v2/images')){var _getProductImageSetti2=getProductImageSettings(),fillColor=_getProductImageSetti2.fillColor,quality=_getProductImageSetti2.quality;var format=getImageFormat();return buildUrl(src,{format:format,width:width,height:height,quality:quality,fill:fillColor.replace('#','')});}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return buildUrl(src,{w:width,h:height,q:70,zd:'resize',fillc:'FFFFFF'});}// Check if an extension registered an external image url handler within the config collection.
+ */export var getFullImageSource=function getFullImageSource(src){var _ref=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{},width=_ref.width,height=_ref.height;if(src&&src.includes('images.shopgate.services')){var _getProductImageSetti2=getProductImageSettings(),fillColor=_getProductImageSetti2.fillColor,quality=_getProductImageSetti2.quality;var format=getImageFormat();return buildUrl(src,{format:format,width:width,height:height,quality:quality,fill:fillColor.replace('#','')});}if(src&&src.startsWith('https://img-cdn.shopgate.com')&&!src.includes('?')){return buildUrl(src,{w:width,h:height,q:70,zd:'resize',fillc:'FFFFFF'});}// Check if an extension registered an external image url handler within the config collection.
 var createUrlFn=configuration.get(CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL);if(typeof createUrlFn==='function'){var _getProductImageSetti4=getProductImageSettings(),_fillColor=_getProductImageSetti4.fillColor,_quality=_getProductImageSetti4.quality;var _format=getImageFormat();// Invoke the handler with all relevant parameters.
 var externalUrl=createUrlFn(src,{width:width,height:height,fillColor:_fillColor,quality:_quality,format:_format});if(!!externalUrl&&typeof externalUrl==='string'){return externalUrl;}}return src;};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.0-alpha.14",
+  "version": "7.29.0-alpha.16",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.29.0-alpha.14",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.14",
-    "@shopgate/pwa-core": "7.29.0-alpha.14",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.14",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.14",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.14",
+    "@shopgate/pwa-common": "7.29.0-alpha.16",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.16",
+    "@shopgate/pwa-core": "7.29.0-alpha.16",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.16",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.16",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.16",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",
@@ -41,6 +41,7 @@
     "react-phone-number-input": "^3.2.16",
     "react-player": "1.11.0",
     "react-portal": "^3.1.0",
+    "react-scroll-parallax": "^3.5.0",
     "tss-react": "^4.9.18",
     "validate.js": "^0.13.1"
   },

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,7 +1,28 @@
-var _excluded=["src","alt","breakpoint","className"];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 _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;}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 React,{useMemo}from'react';import PropTypes from'prop-types';import{makeStyles,useResponsiveValue}from'@shopgate/engage/styles';import{parseImageUrl}from"../../helpers";/** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {{breakpoint: Breakpoint} & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',pointerEvents:'none'}});/**
+var _excluded=["src","alt","breakpoint","className","enableParallax","isBanner","borderRadius"],_excluded2=["src"];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 _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;}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 _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 React,{useMemo,useState}from'react';import PropTypes from'prop-types';import{makeStyles,useResponsiveValue}from'@shopgate/engage/styles';import{useParallax}from'react-scroll-parallax';import{parseImageUrl}from"../../helpers";/**
+ * @typedef {Object} CustomResponsiveImageProps
+ * @property {boolean} [enableParallax] Whether to enable the parallax effect.
+ * @property {number} [borderRadius] The border radius to apply to the image.
+ * @property {Breakpoint} [breakpoint] The breakpoint from which on a higher resolution image should
+ * be loaded.
+ * @property {boolean} [isBanner] Whether the image is used as a banner (full width and height of
+ * its container).
+ */ /** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {CustomResponsiveImageProps & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',pointerEvents:'none'},image:{width:'100%'},container:{width:'100%',overflow:'hidden',display:'flex',justifyContent:'center',alignItems:'center'},bannerContainer:{overflow:'hidden',position:'absolute',width:'100%',height:'100%',top:0,left:0,display:'flex',justifyContent:'center',alignItems:'center'},banner:{position:'absolute',width:'100%',height:'100%',objectFit:'cover'}});/**
+ * @param {ResponsiveImageProps} props The component props.
+ * @returns {JSX.Element}
+ */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,className=_ref.className,_ref$enableParallax=_ref.enableParallax,enableParallax=_ref$enableParallax===void 0?false:_ref$enableParallax,_ref$isBanner=_ref.isBanner,isBanner=_ref$isBanner===void 0?false:_ref$isBanner,_ref$borderRadius=_ref.borderRadius,borderRadius=_ref$borderRadius===void 0?0:_ref$borderRadius,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useState=useState(0),_useState2=_slicedToArray(_useState,2),imageHeight=_useState2[0],setImageHeight=_useState2[1];var _useState3=useState(0),_useState4=_slicedToArray(_useState3,2),imageWidth=_useState4[0],setImageWidth=_useState4[1];// If parallax is to soft, increase this value.
+var parallaxPercent=15;var parallax=useParallax({translateY:["-".concat(parallaxPercent),"".concat(parallaxPercent)],disabled:!enableParallax});/**
+   * Handles the image load event
+   * We set the aspect ratio of the container based on the image dimensions
+   * to prevent white spaces in the layout while the image is moving.
+   * The aspect ratio is calculated with the parallaxPercent
+   * @param {Object} event The load event.
+   */var handleImageLoad=function handleImageLoad(event){var width=event.target.clientWidth;var height=event.target.clientHeight;setImageWidth(width);setImageHeight(height);};var containerRatio=useMemo(function(){var heightReduction=enableParallax?imageHeight/100*(parallaxPercent+7):0;return"".concat(imageWidth,"/").concat(imageHeight-heightReduction);},[enableParallax,imageHeight,imageWidth]);var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));return React.createElement("div",{className:cx(_defineProperty(_defineProperty({},classes.bannerContainer,isBanner),classes.container,!isBanner)),style:_extends({borderRadius:"".concat(borderRadius,"px")},!isBanner&&enableParallax?{aspectRatio:containerRatio}:{})},React.createElement("img",_extends({src:imgSrc,ref:parallax.ref,alt:alt,loading:"lazy",className:cx(className,classes.preventSave,classes.image,_defineProperty({},classes.banner,isBanner)),onLoad:handleImageLoad,style:_extends({},enableParallax&&isBanner?{height:"".concat(100+parallaxPercent*2,"%")}:{})},imgProps)));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null,enableParallax:false,isBanner:false,borderRadius:0};/**
  * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
- * It uses the <picture> element to provide a higher resolution image for medium and larger screens.
+ * It renders a image with higher resolution on larger screens
+ * It can apply a parallax effect when scrolling.
  *
  * @param {ResponsiveImageProps} props The component props.
  * @returns {JSX.Element}
- */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,className=_ref.className,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));if(!src){return null;}return React.createElement("img",_extends({src:imgSrc,alt:alt,loading:"lazy",className:cx(classes.preventSave,className)},imgProps));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null};export default ResponsiveWidgetImage;
+ */var Protector=function Protector(_ref2){var src=_ref2.src,rest=_objectWithoutProperties(_ref2,_excluded2);if(!src){return null;}// Only render the actual ResponsiveWidgetImage if a src is provided to avoid errors from
+// the useParallax hook.
+return React.createElement(ResponsiveWidgetImage,_extends({src:src},rest));};Protector.defaultProps={src:null};export default Protector;

package/page/components/WidgetRichText/WidgetRichText.js

@@ -1,4 +1,4 @@
-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);}import React from'react';import PropTypes from'prop-types';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme){return{root:{width:'100%','& > :first-child':{marginTop:0},'& > :last-child':{marginBottom:0},'& p':{margin:'0px 0px 1rem 0px',':empty':{minHeight:'1rem'}},'ul, ol':{paddingLeft:'40px'},'ul li':{listStyleType:'disc'},'ol li':{listStyleType:'decimal'},h1:_extends({},theme.typography.h1,{margin:'0px 0px 1rem 0px'}),h2:_extends({},theme.typography.h2,{margin:'0px 0px 1rem 0px'}),h3:_extends({},theme.typography.h3,{margin:'0px 0px 1rem 0px'}),h4:_extends({},theme.typography.h4,{margin:'0px 0px 1rem 0px'}),h5:_extends({},theme.typography.h5,{margin:'0px 0px 1rem 0px'}),h6:_extends({},theme.typography.h6,{margin:'0px 0px 1rem 0px'})}};});/**
+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);}import React from'react';import PropTypes from'prop-types';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';var useStyles=makeStyles()(function(theme){return{root:{width:'100%','& > :first-child':{marginTop:0},'& > :last-child':{marginBottom:0},'& p':{margin:'0px 0px 1rem 0px',':empty':{minHeight:'1rem'}},'ul, ol':{paddingLeft:'40px'},'ul li':{listStyleType:'disc'},'ol li':{listStyleType:'decimal'},h1:_extends({},theme.typography.h1,{margin:'0px 0px 1rem 0px'}),h2:_extends({},theme.typography.h2,{margin:'0px 0px 1rem 0px'}),h3:_extends({},theme.typography.h3,{margin:'0px 0px 1rem 0px'}),h4:_extends({},theme.typography.h4,{margin:'0px 0px 1rem 0px'}),h5:_extends({},theme.typography.h5,{margin:'0px 0px 1rem 0px'}),h6:_extends({},theme.typography.h6,{margin:'0px 0px 1rem 0px'}),a:{color:'var(--color-primary)'}}};});/**
  * @param {Object} props The component props.
  * @param {string} props.content The rich text content.
  * @param {string} [props.className] An optional class name.

package/page/helpers/index.d.ts

@@ -49,3 +49,22 @@ export declare function parseImageUrl(
   url: string,
   useHighRes?: boolean
 ): string;
+
+type BorderRadiusParams = {
+  /**
+   * The border radius option
+   */
+  borderRadius: 'default' | 'none' |'rounded' | 'custom';
+  /**
+   * The custom border radius value
+   */
+  customBorderRadius?: number
+};
+
+/**
+ * Retrieves the border radius based on the widget config
+ * @returns The resolved border radius
+ */
+export declare function resolveBorderRadiusFromWidgetConfig(
+  params: BorderRadiusParams
+)

package/page/helpers/index.js

@@ -15,4 +15,10 @@ var _ref2=mapping.find(function(_ref4){var _ref5=_slicedToArray(_ref4,2),value=_
  * @param {string} url The original image URL.
  * @param {boolean} useHighRes Whether to return a high resolution version.
  * @returns {string} The parsed image URL.
- */export var parseImageUrl=function parseImageUrl(url,useHighRes){if(!url||!useHighRes){return url;}var match=url.match(/^(.*)\.([^./]+)$/);return!match?url:"".concat(match[1],"@2x.").concat(match[2]);};
+ */export var parseImageUrl=function parseImageUrl(url,useHighRes){if(!url||!useHighRes){return url;}var match=url.match(/^(.*)\.([^./]+)$/);return!match?url:"".concat(match[1],"@2x.").concat(match[2]);};/**
+ * Retrieves the border radius based on the widget config
+ * @param {Object} params The helper parameters.
+ * @param {"default"|"none"|"rounded"|"custom"} params.borderRadius The border radius option.
+ * @param {number} params.borderRadiusCustom The custom border radius value.
+ * @returns {number} The resolved border radius.
+ */export var resolveBorderRadiusFromWidgetConfig=function resolveBorderRadiusFromWidgetConfig(_ref6){var borderRadius=_ref6.borderRadius,borderRadiusCustom=_ref6.borderRadiusCustom;if(borderRadius==='none')return 0;if(borderRadius==='rounded')return 16;if(borderRadius==='custom'&&typeof borderRadiusCustom==='number')return borderRadiusCustom;return 0;};

package/page/widgets/HTML/HTML.js

@@ -1,5 +1,5 @@
 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}}});/**
+':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;

package/page/widgets/HeroBanner/HeroBanner.js

@@ -1,3 +1,3 @@
-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{ConditionalWrapper,Link}from'@shopgate/engage/components';import{WidgetRichText,ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{makeStyles}from'@shopgate/engage/styles';import{useHeroBannerWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{link:{width:'100%'},content:_defineProperty({width:'100%',position:'relative',display:'flex',alignItems:'center',minHeight:300},theme.breakpoints.up('md'),{minHeight:400}),richText:{position:'relative',zIndex:2,padding:theme.spacing(2)},image:{position:'absolute',width:'100%',height:'100%',top:0,left:0,objectFit:'cover',zIndex:0,pointerEvents:'none'}};});/**
+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{ConditionalWrapper,Link}from'@shopgate/engage/components';import{WidgetRichText,ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{makeStyles}from'@shopgate/engage/styles';import{useHeroBannerWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{link:{width:'100%'},content:_defineProperty({width:'100%',position:'relative',display:'flex',alignItems:'center',minHeight:300},theme.breakpoints.up('md'),{minHeight:400}),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,backgroundImage=_useHeroBannerWidget.backgroundImage,link=_useHeroBannerWidget.link;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement("div",{className:cx(classes.content)},React.createElement(WidgetRichText,{content:text,className:cx(classes.richText)}),React.createElement(ResponsiveWidgetImage,{src:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url,alt:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt,className:cx(classes.image)})));};export default HeroBanner;
+ */var HeroBanner=function HeroBanner(){var _useHeroBannerWidget=useHeroBannerWidget(),text=_useHeroBannerWidget.text,backgroundImage=_useHeroBannerWidget.backgroundImage,link=_useHeroBannerWidget.link,borderRadius=_useHeroBannerWidget.borderRadius,parallax=_useHeroBannerWidget.parallax;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;return React.createElement(ConditionalWrapper,{condition:!!link,wrapper:function wrapper(children){return React.createElement(Link,{href:link,className:cx(classes.link)},children);}},React.createElement("div",{className:cx(classes.content)},React.createElement(WidgetRichText,{content:text,className:cx(classes.richText)}),React.createElement("div",{className:cx(classes.imageContainer)},React.createElement(ResponsiveWidgetImage,{src:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.url,alt:backgroundImage===null||backgroundImage===void 0?void 0:backgroundImage.alt,borderRadius:borderRadius,enableParallax:parallax,isBanner:true}))));};export default HeroBanner;

package/page/widgets/HeroBanner/hooks.js

@@ -1,14 +1,17 @@
-import{useWidget}from'@shopgate/engage/page/hooks';/**
+var _excluded=["borderRadius","borderRadiusCustom"];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";/**
  * @typedef {Object} HeroBanner
  * @property {string} text Banner text content
  * @property {Object} backgroundImage Banner background image
  * @property {string} backgroundImage.url Banner background image URL
  * @property {string} backgroundImage.alt Banner background image alt text
  * @property {string} link Optional banner link
+ * @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<HeroBanner> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Image widget configuration and data.
- */export var useHeroBannerWidget=function useHeroBannerWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;return config;};
+ */export var useHeroBannerWidget=function useHeroBannerWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},borderRadius=_ref.borderRadius,borderRadiusCustom=_ref.borderRadiusCustom,rest=_objectWithoutProperties(_ref,_excluded);var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});return _extends({},rest,{borderRadius:borderRadiusResolved});};

package/page/widgets/Image/Image.js

@@ -1,4 +1,4 @@
-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()(function(){return{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";var 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;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)}));};export default Image;
+ */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;

package/page/widgets/Image/hooks.js

@@ -1,4 +1,4 @@
-import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}from'@shopgate/engage/styles';/**
+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.
@@ -9,6 +9,9 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}fro
  * @property {boolean} [useImageWide] Whether to use the wide image on
  * medium and larger screens.
  * @property {string} [link] The link URL.
+ * @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
@@ -16,4 +19,4 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}fro
 /**
  * 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;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};};
+ */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};};

package/page/widgets/ImageRow/ImageRow.js

@@ -1,4 +1,4 @@
 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;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%'}};});/**
  * 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,imageWrapping=_useImageRowWidget.imageWrapping,imageSpacing=_useImageRowWidget.imageSpacing;var _useStyles=useStyles({imageSpacing:imageSpacing}),cx=_useStyles.cx,classes=_useStyles.classes;if(images.length===0)return null;return React.createElement(Grid,{className:cx(classes.imageContainer),component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:cx(classes.image)},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:cx(classes.image)})));}));};export default ImageRow;
+ */var ImageRow=function ImageRow(){var _useImageRowWidget=useImageRowWidget(),images=_useImageRowWidget.images,imageWrapping=_useImageRowWidget.imageWrapping,imageSpacing=_useImageRowWidget.imageSpacing,borderRadius=_useImageRowWidget.borderRadius,parallax=_useImageRowWidget.parallax;var _useStyles=useStyles({imageSpacing:imageSpacing}),cx=_useStyles.cx,classes=_useStyles.classes;if(images.length===0)return null;return React.createElement(Grid,{className:cx(classes.imageContainer),component:"div"},images.map(function(img){return React.createElement(Grid.Item,{key:img.url,component:"div",className:cx(_defineProperty(_defineProperty(_defineProperty({},classes.itemContainerDefault,imageWrapping==='responsiveDefault'),classes.itemContainerDense,imageWrapping==='responsiveDense'),classes.itemContainerNoWrap,imageWrapping==='responsiveNoWrap'))},React.createElement(ConditionalWrapper,{condition:!!img.link,wrapper:function wrapper(children){return React.createElement(Link,{href:img.link,className:cx(classes.image)},children);}},React.createElement(ResponsiveWidgetImage,{src:img.url,alt:img.altText,className:cx(classes.image),borderRadius:borderRadius,enableParallax:parallax})));}));};export default ImageRow;

package/page/widgets/ImageRow/hooks.js

@@ -1,10 +1,13 @@
-import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';/**
+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,
  * one of: responsiveDefault | responsiveDense | responsiveNoWrap.
  * @property {string} [link] The optional link URL.
  * @property {number} [imageSpacing] An optional gap between images (in pixels).
+ * @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<ImageRowWidgetConfig> >} UseWidgetReturnType
@@ -12,4 +15,4 @@ import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';/*
 /**
  * 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;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};};
+ */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;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};};

package/page/widgets/ImageSlider/ImageSlider.js

@@ -1,4 +1,4 @@
 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);}import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{Swiper,Link,ConditionalWrapper}from'@shopgate/engage/components';import{ResponsiveWidgetImage}from'@shopgate/engage/page/components';import{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{width:'100%'}});/**
  * The ImageSliderWidget is used to display an image slider.
  * @returns {JSX.Element}
- */var ImageSliderWidget=function ImageSliderWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps;if(slides.length===0){return null;}return React.createElement(Swiper,_extends({indicators:true},swiperProps),slides.map(function(slide){if(!slide.image.url){return null;}return React.createElement(Swiper.Item,{key:slide.image.url},React.createElement(ConditionalWrapper,{condition:!!slide.link,wrapper:function wrapper(children){return React.createElement(Link,{href:slide.link},children);}},React.createElement(ResponsiveWidgetImage,{className:classes.image,src:slide.image.url,alt:slide.image.altText||''})));}));};export default ImageSliderWidget;
+ */var ImageSliderWidget=function ImageSliderWidget(){var _useImageSliderWidget=useImageSliderWidget(),slides=_useImageSliderWidget.slides,swiperProps=_useImageSliderWidget.swiperProps,borderRadius=_useImageSliderWidget.borderRadius;var _useStyles=useStyles(),classes=_useStyles.classes;if(slides.length===0){return null;}return React.createElement(Swiper,_extends({indicators:true},swiperProps),slides.map(function(slide){if(!slide.image.url){return null;}return React.createElement(Swiper.Item,{key:slide.image.url},React.createElement(ConditionalWrapper,{condition:!!slide.link,wrapper:function wrapper(children){return React.createElement(Link,{href:slide.link},children);}},React.createElement(ResponsiveWidgetImage,{className:classes.image,src:slide.image.url,alt:slide.image.altText||'',borderRadius:borderRadius})));}));};export default ImageSliderWidget;

package/page/widgets/ImageSlider/hooks.js

@@ -1,4 +1,4 @@
-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 _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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';/**
+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 _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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{resolveBorderRadiusFromWidgetConfig}from"../../helpers";/**
  * @typedef {import('swiper/react').SwiperProps} SwiperCmpProps
  */ /**
  * @typedef {Object} ImageSliderImageData
@@ -20,6 +20,8 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {number} slidesPerViewCustomLarge Slides per view for large screens.
  * @property {number} imageSpacing Optional gap between image slides (in pixels).
  * @property {"default"|"off"|"bullets"|"progressbar"|"fraction"} paginationStyle
+ * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
+ * @property {number} [borderRadiusCustom] The custom border radius value.
  * the pagination type for the slider.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
@@ -27,8 +29,8 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the ImageSlider widget configuration and data.
- */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing,_config$paginationSty=config.paginationStyle,paginationStyle=_config$paginationSty===void 0?'bullets':_config$paginationSty;var paginationType=useMemo(function(){return paginationStyle==='default'?'bullets':paginationStyle.toLowerCase();},[paginationStyle]);var imagesWithUrls=useMemo(function(){return images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;});},[images]);/**
+ */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing,_config$paginationSty=config.paginationStyle,paginationStyle=_config$paginationSty===void 0?'bullets':_config$paginationSty,borderRadius=config.borderRadius,borderRadiusCustom=config.borderRadiusCustom;var borderRadiusResolved=resolveBorderRadiusFromWidgetConfig({borderRadius:borderRadius,borderRadiusCustom:borderRadiusCustom});var paginationType=useMemo(function(){return paginationStyle==='default'?'bullets':paginationStyle.toLowerCase();},[paginationStyle]);var imagesWithUrls=useMemo(function(){return images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;});},[images]);/**
    * @type {SwiperCmpProps}
    */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});var showPagination=paginationType!=='off'&&imagesWithUrls.length>1;// Create a key that changes when relevant config changes, to force remount of Swiper
 var componentKey=isPreview?JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing,paginationType:paginationType,showPagination:showPagination},breakpoints)):null;return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,spaceBetween:imageSpacing,pagination:showPagination?{type:paginationType,clickable:true,dynamicBullets:true}:false},isPreview?{key:componentKey,// Improves interaction with the slider in the CMS preview iframe
-touchStartPreventDefault:true}:{});},[slidesPerView,theme.breakpoints.values.sm,theme.breakpoints.values.md,paginationType,imagesWithUrls.length,imageSpacing,slideAutomatic,sliderSpeed,endlessSlider,isPreview,slidesPerViewCustomSmall,slidesPerViewCustomMedium,slidesPerViewCustomLarge]);return{slides:imagesWithUrls,swiperProps:swiperProps};};
+touchStartPreventDefault:true}:{});},[slidesPerView,theme.breakpoints.values.sm,theme.breakpoints.values.md,paginationType,imagesWithUrls.length,imageSpacing,slideAutomatic,sliderSpeed,endlessSlider,isPreview,slidesPerViewCustomSmall,slidesPerViewCustomMedium,slidesPerViewCustomLarge]);return{slides:imagesWithUrls,swiperProps:swiperProps,borderRadius:borderRadiusResolved};};

package/product/components/ProductGridPrice/index.js

@@ -3,4 +3,4 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import{Grid
  * renders a row with the current price and a strike price when present. As same as the price info.
  * @param {Object} product A product entity.
  * @return {JSX.Element}
- */var ProductGridPrice=function ProductGridPrice(_ref){var product=_ref.product;var price=product.price;return React.createElement(Fragment,null,React.createElement(Grid,{className:"".concat(styles.priceWrapper," engage__product__product-grid-price"),wrap:true},React.createElement(Grid.Item,{grow:1},React.createElement(Price,{currency:price.currency,discounted:!!price.discount,unitPrice:price.unitPrice,unitPriceMin:price.unitPriceMin})),price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.msrp,currency:price.currency})),!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),React.createElement(PriceInfo,{product:product,className:styles.basicPrice,wrapper:function wrapper(children){return React.createElement(Grid,null,React.createElement(Grid.Item,null,children));}}));};export default withPriceCalculation(ProductGridPrice);
+ */var ProductGridPrice=function ProductGridPrice(_ref){var product=_ref.product;var price=product.price;return React.createElement(Fragment,null,React.createElement(Grid,{className:"".concat(styles.priceWrapper," engage__product__product-grid-price"),wrap:true},React.createElement(Grid.Item,{grow:1},React.createElement(Price,{currency:price.currency,discounted:!!price.discount,unitPrice:price.unitPrice,unitPriceMin:price.unitPriceMin,unitPriceMax:price.unitPriceMax})),price.msrp>0&&price.unitPrice!==price.msrp&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.msrp,currency:price.currency})),!price.msrp&&price.unitPriceStriked>0&&price.unitPrice!==price.unitPriceStriked&&React.createElement(Grid.Item,null,React.createElement(PriceStriked,{className:styles.strikedPrice,value:price.unitPriceStriked,currency:price.currency}))),React.createElement(PriceInfo,{product:product,className:styles.basicPrice,wrapper:function wrapper(children){return React.createElement(Grid,null,React.createElement(Grid.Item,null,children));}}));};export default withPriceCalculation(ProductGridPrice);

package/product/components/ProductList/components/Item/index.js

@@ -2,4 +2,4 @@ import React,{Fragment}from'react';import PropTypes from'prop-types';import Grid
  * The Product List Item component.
  * @param {Object} props The component props.
  * @return {JSX}
- */var Item=function Item(_ref){var display=_ref.display,product=_ref.product;return React.createElement(Link,{tagName:"a",href:"".concat(ITEM_PATH,"/").concat(bin2hex(product.id)),className:"".concat(styles.container," engage__product__product-list__item"),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},React.createElement(Grid,{className:styles.listItemContainer},React.createElement(Grid.Item,{shrink:0,className:styles.imageContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE,props:{productId:product.id}},React.createElement(Image,{itemProp:"image",src:product.featuredImageBaseUrl,alt:product.name})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_AFTER,props:{productId:product.id}}),React.createElement(ProductBadges,{location:"productList",productId:product.id},!!product.price.discount&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},React.createElement(DiscountBadge,{className:styles.discount,text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})))),React.createElement(Grid.Item,{grow:4,className:styles.titleContainer},React.createElement(ProductName,{name:product.name,portalName:portals.PRODUCT_ITEM_NAME,portalProps:{productId:product.id},itemProp:"name",testId:"Productname: ".concat(product.name)}),(!display||display.manufacturer&&product.manufacturer)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER,props:{productId:product.id}},React.createElement(Manufacturer,{text:product.manufacturer,className:styles.manufacturer})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_AFTER,props:{productId:product.id}})),product.availability&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY,props:{productId:product.id}},React.createElement(Availability,{className:styles.availability,text:product.availability.text,state:product.availability.state})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_AFTER,props:{productId:product.id}})),(!product.availability||product.availability.state===AVAILABILITY_STATE_OK)&&React.createElement(Availability,{state:!product.stock||product.stock.orderable?AVAILABILITY_STATE_OK:AVAILABILITY_STATE_ALERT,text:i18n.text('product.available.not'),showWhenAvailable:false})),(!display||display.price)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:'productList'}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:'productList'}},React.createElement(Grid.Item,{grow:1,className:styles.priceContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,props:{productId:product.id}}),React.createElement(Price,{className:styles.price,currency:product.price.currency,discounted:!!product.price.discount,unitPrice:product.price.unitPrice,unitPriceMin:product.price.unitPriceMin}),product.price.msrp>0&&product.price.unitPrice!==product.price.msrp&&React.createElement(PriceStriked,{value:product.price.msrp,currency:product.price.currency,className:styles.priceStriked}),!product.price.msrp&&product.price.unitPriceStriked>0&&React.createElement(PriceStriked,{value:product.price.unitPriceStriked,currency:product.price.currency,className:styles.priceStriked}),React.createElement(PriceInfo,{product:product,className:styles.priceInfo}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,props:{productId:product.id}}))),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:'productList'}})),React.createElement(Grid.Item,{shrink:0,className:styles.favouriteContainer})));};Item.defaultProps={display:null};export default Item;
+ */var Item=function Item(_ref){var display=_ref.display,product=_ref.product;return React.createElement(Link,{tagName:"a",href:"".concat(ITEM_PATH,"/").concat(bin2hex(product.id)),className:"".concat(styles.container," engage__product__product-list__item"),itemProp:"item",itemScope:true,itemType:"http://schema.org/Product"},React.createElement(Grid,{className:styles.listItemContainer},React.createElement(Grid.Item,{shrink:0,className:styles.imageContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE,props:{productId:product.id}},React.createElement(Image,{itemProp:"image",src:product.featuredImageBaseUrl,alt:product.name})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_IMAGE_AFTER,props:{productId:product.id}}),React.createElement(ProductBadges,{location:"productList",productId:product.id},!!product.price.discount&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT,props:{productId:product.id}},React.createElement(DiscountBadge,{className:styles.discount,text:"-".concat(product.price.discount,"%")})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_DISCOUNT_AFTER,props:{productId:product.id}})))),React.createElement(Grid.Item,{grow:4,className:styles.titleContainer},React.createElement(ProductName,{name:product.name,portalName:portals.PRODUCT_ITEM_NAME,portalProps:{productId:product.id},itemProp:"name",testId:"Productname: ".concat(product.name)}),(!display||display.manufacturer&&product.manufacturer)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER,props:{productId:product.id}},React.createElement(Manufacturer,{text:product.manufacturer,className:styles.manufacturer})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_MANUFACTURER_AFTER,props:{productId:product.id}})),product.availability&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_BEFORE,props:{productId:product.id}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY,props:{productId:product.id}},React.createElement(Availability,{className:styles.availability,text:product.availability.text,state:product.availability.state})),React.createElement(Portal,{name:portals.PRODUCT_ITEM_AVAILABILITY_AFTER,props:{productId:product.id}})),(!product.availability||product.availability.state===AVAILABILITY_STATE_OK)&&React.createElement(Availability,{state:!product.stock||product.stock.orderable?AVAILABILITY_STATE_OK:AVAILABILITY_STATE_ALERT,text:i18n.text('product.available.not'),showWhenAvailable:false})),(!display||display.price)&&React.createElement(Fragment,null,React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_BEFORE,props:{productId:product.id,location:'productList'}}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE,props:{productId:product.id,location:'productList'}},React.createElement(Grid.Item,{grow:1,className:styles.priceContainer},React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_BEFORE,props:{productId:product.id}}),React.createElement(Price,{className:styles.price,currency:product.price.currency,discounted:!!product.price.discount,unitPrice:product.price.unitPrice,unitPriceMin:product.price.unitPriceMin,unitPriceMax:product.price.unitPriceMax}),product.price.msrp>0&&product.price.unitPrice!==product.price.msrp&&React.createElement(PriceStriked,{value:product.price.msrp,currency:product.price.currency,className:styles.priceStriked}),!product.price.msrp&&product.price.unitPriceStriked>0&&React.createElement(PriceStriked,{value:product.price.unitPriceStriked,currency:product.price.currency,className:styles.priceStriked}),React.createElement(PriceInfo,{product:product,className:styles.priceInfo}),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_INSIDE_AFTER,props:{productId:product.id}}))),React.createElement(Portal,{name:portals.PRODUCT_ITEM_PRICE_AFTER,props:{productId:product.id,location:'productList'}})),React.createElement(Grid.Item,{shrink:0,className:styles.favouriteContainer})));};Item.defaultProps={display:null};export default Item;