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

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/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.15",
   "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.15",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.15",
+    "@shopgate/pwa-core": "7.29.0-alpha.15",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.15",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.15",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.15",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

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

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,_ref){var borderRadius=_ref.borderRadius;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',borderRadius:"".concat(borderRadius,"px")}};});/**
  * @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;var _useStyles=useStyles({borderRadius:borderRadius}),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;

package/page/widgets/HeroBanner/hooks.js

@@ -1,14 +1,16 @@
-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.
  */ /**
  * @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()(function(theme,_ref){var borderRadius=_ref.borderRadius;return{link:{},image:{width:'100%',borderRadius:"".concat(borderRadius,"px")}};});/**
  * 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 _useImageWidget=useImageWidget(),link=_useImageWidget.link,altText=_useImageWidget.altText,url=_useImageWidget.url,borderRadius=_useImageWidget.borderRadius;var _useStyles=useStyles({borderRadius:borderRadius}),cx=_useStyles.cx,classes=_useStyles.classes;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;

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,8 @@ 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.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
@@ -16,4 +18,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;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};};

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%'}};});/**
+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,borderRadius=_ref.borderRadius;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',borderRadius:"".concat(borderRadius,"px")},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;var _useStyles=useStyles({imageSpacing:imageSpacing,borderRadius:borderRadius}),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;

package/page/widgets/ImageRow/hooks.js

@@ -1,10 +1,12 @@
-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.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageRowWidgetConfig> >} UseWidgetReturnType
@@ -12,4 +14,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;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};};

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%'}});/**
+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()(function(theme,_ref){var borderRadius=_ref.borderRadius;return{image:{width:'100%',borderRadius:"".concat(borderRadius,"px")}};});/**
  * 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({borderRadius:borderRadius}),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||''})));}));};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;