@shopgate/engage 7.29.0-alpha.5 → 7.29.0-alpha.6

package/development/components/DevelopmentTools/hooks.js

@@ -4,5 +4,5 @@ import{useEffect,useCallback}from'react';/**
  *
  * @param {string} shortcut - Shortcut string using mac-style notation, e.g. 'cmd+i'.
  * @param {Function} callback - Function to call when the shortcut is triggered.
- */export function useShortcut(shortcut,callback){var normalizeShortcut=useCallback(function(){return shortcut.toLowerCase().split('+').map(function(k){return k.trim();}).sort().join('+');},[shortcut]);var handleKeyDown=useCallback(function(event){var keys=[];if(event.ctrlKey)keys.push('ctrl');if(event.metaKey)keys.push('cmd');// Treat meta as cmd
-if(event.altKey)keys.push('alt');if(event.shiftKey)keys.push('shift');var key=event.key.toLowerCase();if(!['control','meta','alt','shift'].includes(key)){keys.push(key);}var pressed=keys.sort().join('+');if(pressed===normalizeShortcut()){event.preventDefault();callback(event);}},[callback,normalizeShortcut]);useEffect(function(){window.addEventListener('keydown',handleKeyDown);return function(){return window.removeEventListener('keydown',handleKeyDown);};},[handleKeyDown]);}
+ */export function useShortcut(shortcut,callback){var normalizeShortcut=useCallback(function(){return shortcut.toLowerCase().split('+').map(function(k){return k.trim();}).sort().join('+');},[shortcut]);var handleKeyDown=useCallback(function(event){var _event$key;var keys=[];if(event.ctrlKey)keys.push('ctrl');if(event.metaKey)keys.push('cmd');// Treat meta as cmd
+if(event.altKey)keys.push('alt');if(event.shiftKey)keys.push('shift');var key=(_event$key=event.key)===null||_event$key===void 0?void 0:_event$key.toLowerCase();if(!['control','meta','alt','shift'].includes(key)){keys.push(key);}var pressed=keys.sort().join('+');if(pressed===normalizeShortcut()){event.preventDefault();callback(event);}},[callback,normalizeShortcut]);useEffect(function(){window.addEventListener('keydown',handleKeyDown);return function(){return window.removeEventListener('keydown',handleKeyDown);};},[handleKeyDown]);}

package/package.json

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

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -0,0 +1,7 @@
+var _excluded=["src","alt","breakpoint"];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 React,{useMemo}from'react';import PropTypes from'prop-types';import{useTheme}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 */ /**
+ * 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,imgProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),breakpoints=_useTheme.breakpoints;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);return React.createElement("picture",null,React.createElement("source",{media:"(width >= ".concat(breakpoints.values[breakpoint],"px)"),srcSet:src2x}),React.createElement("img",_extends({src:src,alt:alt,loading:"lazy"},imgProps)));};ResponsiveWidgetImage.defaultProps={alt:null,breakpoint:'md'};export default ResponsiveWidgetImage;

package/page/components/ResponsiveWidgetImage/index.js

@@ -0,0 +1 @@
+export{default}from"./ResponsiveWidgetImage";

package/page/components/Widgets/Widgets.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,{useMemo,useRef}from'react';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';import{useRoute,useThemeWidgets}from'@shopgate/engage/core/hooks';import{PAGE_PREVIEW_PATTERN}from'@shopgate/engage/page/constants';import{ConditionalWrapper}from'@shopgate/engage/components';import WidgetsPreviewProvider from"./WidgetsPreviewProvider";import Widget from"./Widget";import Overlay from"./Overlay";import{usePreviewIframeCommunication}from"./hooks";/**
+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,{useMemo,useRef}from'react';import PropTypes from'prop-types';import{makeStyles}from'@shopgate/engage/styles';import{useRoute,useThemeWidgets}from'@shopgate/engage/core/hooks';import{PAGE_PREVIEW_PATTERN}from'@shopgate/engage/page/constants';import{ConditionalWrapper}from'@shopgate/engage/components';import WidgetsPreviewProvider from"./WidgetsPreviewProvider";import Widget from"./Widget";import Overlay from"./Overlay";import{checkScheduled}from"./helpers";import{usePreviewIframeCommunication}from"./hooks";/**
  * @typedef {import('./types').WidgetDefinition} WidgetDefinition
  */var PLACEHOLDER_COMPONENT='@shopgate/widgetsInternal/Placeholder';var useStyles=makeStyles()({preview:{'& *':{scrollbarWidth:'thin'}}});/**
  * The Widgets component renders a list of widgets.
@@ -8,4 +8,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  */var Widgets=function Widgets(_ref){var _ref$widgets=_ref.widgets,widgetsProp=_ref$widgets===void 0?[]:_ref$widgets;var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var _useRoute=useRoute(),pattern=_useRoute.pattern;var widgetsRef=useRef(null);var isPreview=pattern===PAGE_PREVIEW_PATTERN;var widgetComponents=useThemeWidgets('v2');usePreviewIframeCommunication(isPreview);// Create sanitized widgets array that only includes widgets with valid components.
 var widgets=useMemo(function(){if(isPreview){// All widgets are allowed in preview mode.
 return widgetsProp;}// Remove widgets that do not have a valid component.
-return widgetsProp.filter(function(widget){return!!widgetComponents[widget.widgetConfigDefinitionCode];});},[isPreview,widgetComponents,widgetsProp]);if(!Array.isArray(widgets)||widgets.length===0){return null;}return React.createElement(ConditionalWrapper,{condition:isPreview,wrapper:function wrapper(children){return React.createElement(WidgetsPreviewProvider,null,children,React.createElement(Overlay,{containerRef:widgetsRef}));}},React.createElement("div",{className:cx('engage__widgets',_defineProperty({},classes.preview,isPreview)),ref:widgetsRef},widgets.map(function(widget){var component=widgetComponents[widget.widgetConfigDefinitionCode]||widgetComponents[PLACEHOLDER_COMPONENT];return React.createElement(Widget,{key:widget.code,definition:widget,isPreview:isPreview,component:component,isCustomLegacyWidget:widget.isCustomLegacyWidget});})));};Widgets.defaultProps={widgets:null};export default Widgets;
+return widgetsProp.filter(function(widget){return!!widgetComponents[widget.widgetConfigDefinitionCode]&&checkScheduled({from:widget===null||widget===void 0?void 0:widget.visibility.scheduleStartDate,to:widget===null||widget===void 0?void 0:widget.visibility.scheduleEndDate}).isActive;});},[isPreview,widgetComponents,widgetsProp]);if(!Array.isArray(widgets)||widgets.length===0){return null;}return React.createElement(ConditionalWrapper,{condition:isPreview,wrapper:function wrapper(children){return React.createElement(WidgetsPreviewProvider,null,children,React.createElement(Overlay,{containerRef:widgetsRef}));}},React.createElement("div",{className:cx('engage__widgets',_defineProperty({},classes.preview,isPreview)),ref:widgetsRef},widgets.map(function(widget){var component=widgetComponents[widget.widgetConfigDefinitionCode]||widgetComponents[PLACEHOLDER_COMPONENT];return React.createElement(Widget,{key:widget.code,definition:widget,isPreview:isPreview,component:component,isCustomLegacyWidget:widget.isCustomLegacyWidget});})));};Widgets.defaultProps={widgets:null};export default Widgets;

package/page/components/Widgets/helpers.js

@@ -4,19 +4,19 @@ import{PAGE_PREVIEW_PATTERN}from'@shopgate/engage/page/constants';/**
  * @returns {HTMLElement|null}
  */export var getScrollContainer=function getScrollContainer(){return document.querySelector(".route__".concat(PAGE_PREVIEW_PATTERN.replace(/^\/+/,'')));};/**
  * @typedef {Object} ScheduledParams
- * @param {string} [from] The start date of the scheduling in ISO format.
- * @param {string} [to] The end date of the scheduling in ISO format.
- * @param {number} [timezoneOffset] The timezone offset in minutes. If not provided, the local
+ * @property {string} [from] The start date of the scheduling in ISO format.
+ * @property {string} [to] The end date of the scheduling in ISO format.
+ * @property {number} [timezoneOffset] The timezone offset in minutes. If not provided, the local
  * timezone offset will be used.
  */ /**
  * @typedef {Object} ScheduledStatus
- * @param {boolean} isScheduled Indicates if the widget is scheduled.
- * @param {boolean} isActive Indicates if the widget is currently active within the
+ * @property {boolean} isScheduled Indicates if the widget is scheduled.
+ * @property {boolean} isActive Indicates if the widget is currently active within the
  * scheduled time frame.
- * @param {boolean} isExpired Indicates if the scheduled time frame has expired.
+ * @property {boolean} isExpired Indicates if the scheduled time frame has expired.
  */ /**
  * Retrieves the scheduling status of a widget based on the provided parameters.
- * @param {ScheduledParams} params The parameters for the function.
+ * @param {ScheduledParams} [params] The parameters for the function.
  * @returns {ScheduledStatus} An object containing the scheduling status.
  */export function checkScheduled(){var _ref=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},from=_ref.from,to=_ref.to,timezoneOffset=_ref.timezoneOffset;var now=new Date();// Convert current time to provided or local timezone
 var localOffset=timezoneOffset!==null&&timezoneOffset!==void 0?timezoneOffset:-now.getTimezoneOffset();// in minutes

package/page/components/index.js

@@ -1 +1 @@
-export{default as NotFound}from"./NotFound";export{default as Widgets}from"./Widgets";
+export{default as NotFound}from"./NotFound";export{default as Widgets}from"./Widgets";export{default as ResponsiveWidgetImage}from"./ResponsiveWidgetImage";

package/page/helpers/index.d.ts

@@ -45,3 +45,11 @@ export type GetProductSearchParamsFromProductsInputConfigReturnValue = {
 export declare function getProductSearchParamsFromProductsInputConfig(
   products: ProductsWidgetInputConfig
 ): GetProductSearchParamsFromProductsInputConfigReturnValue;
+
+/**
+ * Helper to parse the image URL to return a high resolution version if required.
+ */
+export declare function parseImageUrl(
+  url: string,
+  useHighRes?: boolean
+): string;

package/page/helpers/index.js

@@ -9,4 +9,9 @@
  * @param {ProductsWidgetInputConfig} products Config object of the "Products" input.
  * @returns {GetProductSearchParamsFromProductsInputConfigReturnValue}
  */export var getProductSearchParamsFromProductsInputConfig=function getProductSearchParamsFromProductsInputConfig(){var products=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var _ref=products||{},productSelectorType=_ref.productSelectorType,productsBrand=_ref.productsBrand,productsCategory=_ref.productsCategory,productsItemNumbers=_ref.productsItemNumbers,productsManualItemNumbers=_ref.productsManualItemNumbers,productsSelectorItemNumbers=_ref.productsSelectorItemNumbers,productsSearchTerm=_ref.productsSearchTerm;var productsSearchType=productSelectorType;/** @type {string|string[]} */var productsSearchValue='';switch(productSelectorType){case'brand':productsSearchValue=productsBrand;break;case'category':productsSearchValue=productsCategory;break;// Kept for backward compatibility - was replaces by 'manualItemNumbers' and 'productSelector'
-case'itemNumbers':productsSearchValue=productsItemNumbers.split(',').map(function(item){return item.trim();});break;case'manualItemNumbers':productsSearchValue=productsManualItemNumbers;break;case'productSelector':productsSearchValue=productsSelectorItemNumbers;break;case'searchTerm':default:productsSearchValue=productsSearchTerm;}if(['itemNumbers','manualItemNumbers','productSelector'].includes(productSelectorType)){productsSearchType='productIds';}return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};
+case'itemNumbers':productsSearchValue=productsItemNumbers.split(',').map(function(item){return item.trim();});break;case'manualItemNumbers':productsSearchValue=productsManualItemNumbers;break;case'productSelector':productsSearchValue=productsSelectorItemNumbers;break;case'searchTerm':default:productsSearchValue=productsSearchTerm;}if(['itemNumbers','manualItemNumbers','productSelector'].includes(productSelectorType)){productsSearchType='productIds';}return{productsSearchType:productsSearchType,productsSearchValue:productsSearchValue};};/**
+ * Parses the image URL to return a high resolution version if required.
+ * @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]);};

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{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(){return{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("img",{loading:"lazy",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;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,9 +1,4 @@
 import{useWidget}from'@shopgate/engage/page/hooks';import{useResponsiveValue}from'@shopgate/engage/styles';/**
- * Parses the image URL to return a high resolution version if required.
- * @param {string} url The original image URL.
- * @param {boolean} useHighRes Whether to return a high resolution version.
- * @returns {string} The parsed image URL.
- */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]);};/**
  * @typedef {Object} ImageWidgetConfig
  * @property {Object} image The image object.
  * @property {string} image.url The image URL.
@@ -21,4 +16,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 url=useResponsiveValue({xs:image===null||image===void 0?void 0:image.url,md:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.url)?parseImageUrl(imageWide.url,true):parseImageUrl(image===null||image===void 0?void 0:image.url,true)});var altText=useResponsiveValue({xs:image===null||image===void 0?void 0:image.altText,md:useImageWide&&(imageWide===null||imageWide===void 0?void 0:imageWide.altText)?imageWide.altText:image===null||image===void 0?void 0:image.altText});return{url:url,altText: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;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};};

package/page/widgets/ImageRow/ImageRow.js

@@ -0,0 +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{useImageWidget}from"./hooks";import ResponsiveWidgetImage from"../../components/ResponsiveWidgetImage";var useStyles=makeStyles()(function(theme){return{imageContainer:{width:'100%',display:'flex',overflowX:'hidden',alignItems:'flex-start',flexWrap:'wrap'},image:{maxWidth:'100%',height:'auto',flexShrink:1,display:'block',width:'100%',objectFit:'contain'},itemContainerDense:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:'1 1 33%'}),theme.breakpoints.up('md'),{flex:'1 1 16%'}),itemContainerDefault:_defineProperty(_defineProperty({},theme.breakpoints.down('md'),{flex:'1 1 50%'}),theme.breakpoints.up('md'),{flex:'1 1 25%'}),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 _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;var _useImageWidget=useImageWidget(),images=_useImageWidget.images,imageWrapping=_useImageWidget.imageWrapping;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

@@ -0,0 +1,14 @@
+import{useWidget}from'@shopgate/engage/page/hooks';import{useMemo}from'react';/**
+ * @typedef {Object} ImageWidgetConfig
+ * @property {Array} images The images array.
+ * @property {string} imageWrapping The imageWrapping setting,
+ * one of: responsiveDefault | responsiveDense | responsiveNoWrap.
+ * @property {string} [link] The optional link URL.
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the Image widget configuration and data.
+ * Handles responsive image URLs and alt texts.
+ */export var useImageWidget=function useImageWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var _ref=config||{},_ref$images=_ref.images,images=_ref$images===void 0?[]:_ref$images,imageWrapping=_ref.imageWrapping;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};};

package/page/widgets/ImageRow/index.js

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

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{useImageSliderWidget}from"./hooks";var useStyles=makeStyles()({image:{touchAction:'none',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()({image:{touchAction:'none',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("img",{className:classes.image,loading:"lazy",src:slide.image.url,alt:slide.image.altText||''})));}));};export default ImageSliderWidget;
+ */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;

package/page/widgets/RichText/RichText.js

@@ -0,0 +1,3 @@
+import React from'react';import{HtmlSanitizer}from'@shopgate/engage/components';import{makeStyles}from'@shopgate/engage/styles';import{useRichTextWidget}from"./hooks";var useStyles=makeStyles()(function(){return{html:{'& > p:first-child':{marginTop:0},'& p':{marginTop:17,marginBottom:17},'ul, ol':{paddingLeft:'40px'},'ul li':{listStyleType:'disc'},'ol li':{listStyleType:'decimal'}}};});/**
+ * @returns {JSX.Element}
+ */var RichText=function RichText(){var _useRichTextWidget=useRichTextWidget(),richText=_useRichTextWidget.richText;var _useStyles=useStyles(),cx=_useStyles.cx,classes=_useStyles.classes;if(!richText)return null;return React.createElement(HtmlSanitizer,{processStyles:true,settings:{html:richText},className:cx(classes.html)},richText);};export default RichText;

package/page/widgets/RichText/hooks.js

@@ -0,0 +1,10 @@
+import{useWidget}from'@shopgate/engage/page/hooks';/**
+ * @typedef {Object} RichTextWidgetConfig
+ * @property {string} text The rich text content.
+ */ /**
+ * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
+ *   .useWidget<RichTextWidgetConfig> >} UseWidgetReturnType
+ */ // eslint-disable-next-line valid-jsdoc
+/**
+ * Hook to access the Image widget configuration and data.
+ */export var useRichTextWidget=function useRichTextWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;return{richText:config===null||config===void 0?void 0:config.text};};

package/page/widgets/RichText/index.js

@@ -0,0 +1 @@
+export{default}from"./RichText";

package/page/widgets/index.js

@@ -1 +1 @@
-export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";export{default as ImageSliderWidget}from"./ImageSlider";
+export{default as PlaceholderWidget}from"./Placeholder";export{default as ProductListWidget}from"./ProductList";export{default as CategoryListWidget}from"./CategoryList";export{default as HtmlWidget}from"./HTML";export{default as ProductSliderWidget}from"./ProductSlider";export{default as HeadlineWidget}from"./Headline";export{default as ImageWidget}from"./Image";export{default as ImageRowWidget}from"./ImageRow";export{default as ImageSliderWidget}from"./ImageSlider";export{default as RichTextWidget}from"./RichText";

package/page/widgets/widgets.json

@@ -1,7 +1,4 @@
 {
-  "@shopgate/widgetsInternal/Placeholder": {
-    "path": "@shopgate/engage/page/widgets/Placeholder"
-  },
   "@shopgate/widgets/productListWidget": {
     "path": "@shopgate/engage/page/widgets/ProductList"
   },
@@ -20,7 +17,16 @@
   "@shopgate/widgets/imageWidget": {
     "path": "@shopgate/engage/page/widgets/Image"
   },
+  "@shopgate/widgets/imageRowWidget": {
+    "path": "@shopgate/engage/page/widgets/ImageRow"
+  },
   "@shopgate/widgets/imageSliderWidget": {
     "path": "@shopgate/engage/page/widgets/ImageSlider"
+  },
+  "@shopgate/widgets/richTextWidget": {
+    "path": "@shopgate/engage/page/widgets/RichText"
+  },
+  "@shopgate/widgetsInternal/Placeholder": {
+    "path": "@shopgate/engage/page/widgets/Placeholder"
   }
 }