@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/page/widgets/ImageSlider/hooks.js

@@ -1,14 +1,25 @@
-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";/**
+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
  * @property {string} url The image URL.
  * @property {string} [altText] The image alt text.
- */ /**
+ */
+
+/**
  * @typedef {Object} ImageSliderImage
  * @property {ImageSliderImageData} image The image data object.
  * @property {string} [link] The link URL.
- */ /**
+ */
+
+/**
  * @typedef {Object} ImageSliderWidgetConfig
  * @property {ImageSliderImage[]} images The image objects.
  * @property {boolean} slideAutomatic Whether the slider should automatically slide.
@@ -23,14 +34,138 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @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')
+ */
+
+/**
+ * @typedef {ReturnType<typeof import('@shopgate/engage/page/hooks')
  *   .useWidget<ImageSliderWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// 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,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]);/**
+ */
+export const useImageSliderWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config,
+    isPreview,
+    layout
+  } = useWidget();
+  const theme = useTheme();
+  const {
+    images,
+    slideAutomatic,
+    endlessSlider,
+    sliderSpeed,
+    slidesPerView,
+    slidesPerViewCustomSmall,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomLarge,
+    imageSpacing,
+    paginationStyle = 'bullets',
+    borderRadius,
+    borderRadiusCustom
+  } = config;
+  const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
+    borderRadius,
+    borderRadiusCustom
+  });
+  const paginationType = useMemo(() => paginationStyle === 'default' ? 'bullets' : paginationStyle.toLowerCase(), [paginationStyle]);
+  const imagesWithUrls = useMemo(() => images.filter(img => 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,borderRadius:borderRadiusResolved};};
+   */
+  const swiperProps = useMemo(() => {
+    let slidesPerViewSmall = 1.0;
+    let slidesPerViewMedium = 1.3;
+    let 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;
+    }
+
+    /**
+     * Special image spacing for slides with a SINGLE slide per view.
+     *
+     * Needs to be at least as large as the highest horizontal layout margin (when set) to avoid
+     * showing of more than one slide.
+     * @type {number}
+     */
+    const imageSpacingForSingleSlide = Math.max(layout?.marginLeft ?? 0, layout?.marginRight ?? 0, imageSpacing);
+    const breakpoints = {
+      [theme.breakpoints.values.sm]: {
+        slidesPerView: slidesPerViewMedium,
+        ...(slidesPerViewMedium === 1 && imageSpacingForSingleSlide ? {
+          spaceBetween: imageSpacingForSingleSlide
+        } : {
+          spaceBetween: imageSpacing
+        })
+      },
+      [theme.breakpoints.values.md]: {
+        slidesPerView: slidesPerViewLarge,
+        ...(slidesPerViewLarge === 1 && imageSpacingForSingleSlide ? {
+          spaceBetween: imageSpacingForSingleSlide
+        } : {
+          spaceBetween: imageSpacing
+        })
+      }
+    };
+    const showPagination = paginationType !== 'off' && imagesWithUrls.length > 1;
+    // Create a key that changes when relevant config changes, to force remount of Swiper
+    const componentKey = isPreview ? JSON.stringify({
+      slidesPerView,
+      spaceBetween: imageSpacing,
+      paginationType,
+      showPagination,
+      ...breakpoints
+    }) : null;
+    return {
+      autoplay: slideAutomatic ? {
+        delay: sliderSpeed
+      } : false,
+      loop: endlessSlider,
+      slidesPerView: slidesPerViewSmall,
+      breakpoints,
+      pagination: showPagination ? {
+        type: paginationType,
+        clickable: true,
+        dynamicBullets: true
+      } : false,
+      // Prevent cut-off sliders when margins are used in the layout
+      ...(layout.marginLeft || layout.marginRight ? {
+        style: {
+          ...(layout.marginLeft ? {
+            marginLeft: layout.marginLeft * -1,
+            paddingLeft: layout.marginLeft
+          } : {}),
+          ...(layout.marginRight ? {
+            marginRight: layout.marginRight * -1,
+            paddingRight: layout.marginRight
+          } : {})
+        }
+      } : null),
+      ...(slidesPerViewSmall === 1 && imageSpacingForSingleSlide ? {
+        spaceBetween: imageSpacingForSingleSlide
+      } : {
+        spaceBetween: imageSpacing
+      }),
+      ...(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, layout]);
+  return {
+    slides: imagesWithUrls,
+    swiperProps,
+    borderRadius: borderRadiusResolved
+  };
+};

package/page/widgets/ImageSlider/index.js

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

package/page/widgets/Placeholder/Placeholder.js

@@ -1,5 +1,52 @@
-import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{usePlaceholderWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(2),minHeight:200},name:{fontSize:14},pre:{background:'#f7f9fc',border:'1px solid #dbdde2',borderRadius:8,color:'#000',fontSize:10,overflowY:'auto',padding:theme.spacing(1)}};});/**
+import React from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { usePlaceholderWidget } from "./hooks";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(2),
+    minHeight: 200
+  },
+  name: {
+    fontSize: 14
+  },
+  pre: {
+    background: '#f7f9fc',
+    border: '1px solid #dbdde2',
+    borderRadius: 8,
+    color: '#000',
+    fontSize: 10,
+    overflowY: 'auto',
+    padding: theme.spacing(1)
+  }
+}));
+
+/**
  * The PlaceholderWidget component is used to display a placeholder for widget types that
  * are not implemented yet.
  * @returns {JSX.Element}
- */var PlaceholderWidget=function PlaceholderWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _usePlaceholderWidget=usePlaceholderWidget(),code=_usePlaceholderWidget.code,name=_usePlaceholderWidget.name,config=_usePlaceholderWidget.config,layout=_usePlaceholderWidget.layout,visibility=_usePlaceholderWidget.visibility;return React.createElement("div",{className:classes.root},React.createElement("div",{className:classes.name},name),React.createElement("pre",{className:classes.pre},JSON.stringify({code:code,config:config,layout:layout,visibility:visibility},null,2)));};export default PlaceholderWidget;
+ */
+const PlaceholderWidget = () => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    code,
+    name,
+    config,
+    layout,
+    visibility
+  } = usePlaceholderWidget();
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.name
+  }, name), /*#__PURE__*/React.createElement("pre", {
+    className: classes.pre
+  }, JSON.stringify({
+    code,
+    config,
+    layout,
+    visibility
+  }, null, 2)));
+};
+export default PlaceholderWidget;

package/page/widgets/Placeholder/hooks.js

@@ -1,12 +1,19 @@
-import{useWidget}from'@shopgate/engage/page/hooks';/**
+import { useWidget } from '@shopgate/engage/page/hooks';
+
+/**
  * @typedef {Object} PlaceholderWidgetConfig
  * @property {string} foo Example property for the widget configuration.
  * @property {number} bar Another example property for the widget configuration.
- */ /**
+ */
+
+/**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  * .useWidget<PlaceholderWidgetConfig> >} HookReturnType
- */ /**
+ */
+
+/**
  * Local example hook to demonstrate how to extend the useWidget hook with a custom type for
  * the widget configuration.
  * @returns {HookReturnType}
- */export var usePlaceholderWidget=function usePlaceholderWidget(){return useWidget();};
+ */
+export const usePlaceholderWidget = () => useWidget();

package/page/widgets/Placeholder/index.js

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

package/page/widgets/ProductList/ProductList.js

@@ -1,5 +1,67 @@
-import React from'react';import{ActionButton,I18n}from'@shopgate/engage/components';import{ProductGrid}from'@shopgate/engage/product/components';import{useWidgetProducts}from'@shopgate/engage/page/hooks';import{makeStyles}from'@shopgate/engage/styles';import{useProductListWidget}from"./hooks";import WidgetHeadline from"../../components/WidgetHeadline";var useStyles=makeStyles()({root:{// Prevent that the ActionButton margin messes with the layout of the sibling widgets
-overflow:'hidden'},grid:{'&&':{marginTop:0}}});/**
+import "core-js/modules/es.regexp.flags.js";
+import React from 'react';
+import { ActionButton, I18n } from '@shopgate/engage/components';
+import { ProductGrid } from '@shopgate/engage/product/components';
+import { useWidgetProducts } from '@shopgate/engage/page/hooks';
+import { makeStyles } from '@shopgate/engage/styles';
+import { useProductListWidget } from "./hooks";
+import WidgetHeadline from "../../components/WidgetHeadline";
+const useStyles = makeStyles()({
+  root: {
+    // Prevent that the ActionButton margin messes with the layout of the sibling widgets
+    overflow: 'hidden'
+  },
+  grid: {
+    '&&': {
+      marginTop: 0
+    }
+  }
+});
+
+/**
  * The ProductListWidget is used to display product lists.
  * @returns {JSX.Element}
- */var ProductListWidget=function ProductListWidget(){var _useStyles=useStyles(),classes=_useStyles.classes;var _useProductListWidget=useProductListWidget(),productsSearchType=_useProductListWidget.productsSearchType,productsSearchValue=_useProductListWidget.productsSearchValue,sort=_useProductListWidget.sort,productCount=_useProductListWidget.productCount,showLoadMore=_useProductListWidget.showLoadMore,flags=_useProductListWidget.flags,showHeadline=_useProductListWidget.showHeadline,headline=_useProductListWidget.headline;var _useWidgetProducts=useWidgetProducts({type:productsSearchType,value:productsSearchValue,limit:productCount,sort:sort}),fetchNext=_useWidgetProducts.fetchNext,hasNext=_useWidgetProducts.hasNext,isFetching=_useWidgetProducts.isFetching,results=_useWidgetProducts.results;return React.createElement("div",{className:classes.root},showHeadline&&headline&&results.length?React.createElement(WidgetHeadline,{headline:headline}):null,React.createElement(ProductGrid,{products:results,flags:flags,scope:"widgets",infiniteLoad:false,className:classes.grid}),hasNext&&showLoadMore&&React.createElement(ActionButton,{loading:isFetching,onClick:fetchNext},React.createElement(I18n.Text,{string:"common.load_more"})));};export default ProductListWidget;
+ */
+const ProductListWidget = () => {
+  const {
+    classes
+  } = useStyles();
+  const {
+    productsSearchType,
+    productsSearchValue,
+    sort,
+    productCount,
+    showLoadMore,
+    flags,
+    showHeadline,
+    headline
+  } = useProductListWidget();
+  const {
+    fetchNext,
+    hasNext,
+    isFetching,
+    results
+  } = useWidgetProducts({
+    type: productsSearchType,
+    value: productsSearchValue,
+    limit: productCount,
+    sort
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.root
+  }, showHeadline && headline && results.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
+    headline: headline
+  }) : null, /*#__PURE__*/React.createElement(ProductGrid, {
+    products: results,
+    flags: flags,
+    scope: "widgets",
+    infiniteLoad: false,
+    className: classes.grid
+  }), hasNext && showLoadMore && /*#__PURE__*/React.createElement(ActionButton, {
+    loading: isFetching,
+    onClick: fetchNext
+  }, /*#__PURE__*/React.createElement(I18n.Text, {
+    string: "common.load_more"
+  })));
+};
+export default ProductListWidget;

package/page/widgets/ProductList/hooks.js

@@ -1,7 +1,14 @@
-import _camelCase from"lodash/camelCase";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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{getProductSearchParamsFromProductsInputConfig}from'@shopgate/engage/page/helpers';/**
+import _camelCase from "lodash/camelCase";
+import { useMemo } from 'react';
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { getProductSearchParamsFromProductsInputConfig } from '@shopgate/engage/page/helpers';
+
+/**
  * @typedef {import('@shopgate/engage/page/helpers')
  * .ProductsWidgetInputConfig} ProductsWidgetInputConfig
- */ /**
+ */
+
+/**
  * @typedef {Object} ProductListWidgetConfig
  * @property {ProductsWidgetInputConfig} products The products configuration for the widget.
  * @property {number} productCount The number of products to display in the widget
@@ -12,10 +19,46 @@ import _camelCase from"lodash/camelCase";function _extends(){_extends=Object.ass
  * @property {boolean} showRating Whether to display product ratings
  * @property {boolean} [showHeadline] Whether to show the headline.
  * @property {Object} [headline] The headline to be displayed.
- */ /**
+ */
+
+/**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  * .useWidget<ProductListWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Product List widget configuration.
- */export var useProductListWidget=function useProductListWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config;var products=config.products,productCount=config.productCount,sort=config.sort,_config$loadMoreButto=config.loadMoreButton,loadMoreButton=_config$loadMoreButto===void 0?false:_config$loadMoreButto,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$showHeadline=config.showHeadline,showHeadline=_config$showHeadline===void 0?false:_config$showHeadline,headline=config.headline;var productSearchParams=useMemo(function(){return getProductSearchParamsFromProductsInputConfig(products);},[products]);var flags=useMemo(function(){return{name:showName,price:showPrice,reviews:showRating};},[showName,showPrice,showRating]);return _extends({},productSearchParams,{sort:_camelCase(sort),productCount:productCount,showLoadMore:loadMoreButton,flags:flags,showHeadline:showHeadline,headline:headline});};
+ */
+export const useProductListWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config
+  } = useWidget();
+  const {
+    products,
+    productCount,
+    sort,
+    loadMoreButton = false,
+    showName = false,
+    showPrice = false,
+    showRating = false,
+    showHeadline = false,
+    headline
+  } = config;
+  const productSearchParams = useMemo(() => getProductSearchParamsFromProductsInputConfig(products), [products]);
+  const flags = useMemo(() => ({
+    name: showName,
+    price: showPrice,
+    reviews: showRating
+  }), [showName, showPrice, showRating]);
+  return {
+    ...productSearchParams,
+    sort: _camelCase(sort),
+    productCount,
+    showLoadMore: loadMoreButton,
+    flags,
+    showHeadline,
+    headline
+  };
+};

package/page/widgets/ProductList/index.js

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

package/page/widgets/ProductSlider/ProductSlider.js

@@ -1,5 +1,62 @@
-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 React,{useMemo}from'react';import{ProductSlider}from'@shopgate/engage/product/components';import{useWidgetProducts}from'@shopgate/engage/page/hooks';import{useTheme}from'@shopgate/engage/styles';import{useProductSliderWidget}from"./hooks";import WidgetHeadline from"../../components/WidgetHeadline";/**
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useMemo } from 'react';
+import { ProductSlider } from '@shopgate/engage/product/components';
+import { useWidgetProducts } from '@shopgate/engage/page/hooks';
+import { useTheme } from '@shopgate/engage/styles';
+import { useProductSliderWidget } from "./hooks";
+import WidgetHeadline from "../../components/WidgetHeadline";
+
+/**
  * The ProductSliderWidget is used to display a product slider.
  * @returns {JSX.Element}
- */var ProductSliderWidget=function ProductSliderWidget(){var _useProductSliderWidg=useProductSliderWidget(),productsSearchType=_useProductSliderWidg.productsSearchType,productsSearchValue=_useProductSliderWidg.productsSearchValue,sort=_useProductSliderWidg.sort,productCount=_useProductSliderWidg.productCount,swiperProps=_useProductSliderWidg.swiperProps,productItemProps=_useProductSliderWidg.productItemProps,isPreview=_useProductSliderWidg.isPreview,showHeadline=_useProductSliderWidg.showHeadline,headline=_useProductSliderWidg.headline;var _useWidgetProducts=useWidgetProducts({type:productsSearchType,value:productsSearchValue,limit:productCount,sort:sort}),results=_useWidgetProducts.results;var theme=useTheme();var productIds=useMemo(function(){return results===null||results===void 0?void 0:results.map(function(result){return result.id;});},[results]);if(!productIds||!productIds.length){return null;}return React.createElement(React.Fragment,null,showHeadline&&headline&&productIds.length?React.createElement(WidgetHeadline,{headline:headline}):null,React.createElement(ProductSlider,_extends({productIds:productIds,scope:"widgets",productItemProps:productItemProps,slidesPerView:2.3// Improves interaction with the slider in the CMS preview iframe
-},isPreview?{touchStartPreventDefault:true}:{},{breakpoints:_defineProperty(_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:3.3}),theme.breakpoints.values.md,{slidesPerView:4.3}),theme.breakpoints.values.lg,{slidesPerView:5.3})},swiperProps)));};export default ProductSliderWidget;
+ */
+const ProductSliderWidget = () => {
+  const {
+    productsSearchType,
+    productsSearchValue,
+    sort,
+    productCount,
+    swiperProps,
+    productItemProps,
+    isPreview,
+    showHeadline,
+    headline
+  } = useProductSliderWidget();
+  const {
+    results
+  } = useWidgetProducts({
+    type: productsSearchType,
+    value: productsSearchValue,
+    limit: productCount,
+    sort
+  });
+  const theme = useTheme();
+  const productIds = useMemo(() => results?.map(result => result.id), [results]);
+  if (!productIds || !productIds.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showHeadline && headline && productIds.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
+    headline: headline
+  }) : null, /*#__PURE__*/React.createElement(ProductSlider, _extends({
+    productIds: productIds,
+    scope: "widgets",
+    productItemProps: productItemProps,
+    slidesPerView: 2.3
+    // Improves interaction with the slider in the CMS preview iframe
+  }, isPreview ? {
+    touchStartPreventDefault: true
+  } : {}, {
+    breakpoints: {
+      [theme.breakpoints.values.sm]: {
+        slidesPerView: 3.3
+      },
+      [theme.breakpoints.values.md]: {
+        slidesPerView: 4.3
+      },
+      [theme.breakpoints.values.lg]: {
+        slidesPerView: 5.3
+      }
+    }
+  }, swiperProps)));
+};
+export default ProductSliderWidget;

package/page/widgets/ProductSlider/hooks.js

@@ -1,7 +1,14 @@
-import _camelCase from"lodash/camelCase";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{useMemo}from'react';import{useWidget}from'@shopgate/engage/page/hooks';import{getProductSearchParamsFromProductsInputConfig}from'@shopgate/engage/page/helpers';/**
+import _camelCase from "lodash/camelCase";
+import { useMemo } from 'react';
+import { useWidget } from '@shopgate/engage/page/hooks';
+import { getProductSearchParamsFromProductsInputConfig } from '@shopgate/engage/page/helpers';
+
+/**
  * @typedef {import('@shopgate/engage/page/helpers')
  * .ProductsWidgetInputConfig} ProductsWidgetInputConfig
- */ /**
+ */
+
+/**
  * @typedef {Object} ProductSliderWidgetConfig
  * @property {ProductsWidgetInputConfig} products The products configuration for the widget.
  * @property {number} productCount The number of products to display in the widget.
@@ -15,10 +22,69 @@ import _camelCase from"lodash/camelCase";function _extends(){_extends=Object.ass
  * @property {boolean} [isPreview] Whether the widget is in preview mode.
  * @property {boolean} [showHeadline] Whether to show the headline.
  * @property {Object} [headline] The headline to be displayed.
- */ /**
+ */
+
+/**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
  * .useWidget<ProductSliderWidgetConfig> >} UseWidgetReturnType
- */ // eslint-disable-next-line valid-jsdoc
+ */
+
+// eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the Product Slider widget configuration.
- */export var useProductSliderWidget=function useProductSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var products=config.products,productCount=config.productCount,sort=config.sort,_config$showName=config.showName,showName=_config$showName===void 0?false:_config$showName,_config$showPrice=config.showPrice,showPrice=_config$showPrice===void 0?false:_config$showPrice,_config$showRating=config.showRating,showRating=_config$showRating===void 0?false:_config$showRating,_config$slideAutomati=config.slideAutomatic,slideAutomatic=_config$slideAutomati===void 0?true:_config$slideAutomati,_config$endlessSlider=config.endlessSlider,endlessSlider=_config$endlessSlider===void 0?true:_config$endlessSlider,_config$sliderSpeed=config.sliderSpeed,sliderSpeed=_config$sliderSpeed===void 0?7000:_config$sliderSpeed,_config$showHeadline=config.showHeadline,showHeadline=_config$showHeadline===void 0?false:_config$showHeadline,headline=config.headline;var productSearchParams=useMemo(function(){return getProductSearchParamsFromProductsInputConfig(products);},[products]);var swiperProps=useMemo(function(){return{autoplay:slideAutomatic,delay:sliderSpeed,loop:endlessSlider};},[slideAutomatic,sliderSpeed,endlessSlider]);var productItemProps=useMemo(function(){return{hideName:!showName,hidePrice:!showPrice,hideRating:!showRating};},[showName,showPrice,showRating]);return _extends({},productSearchParams,{sort:_camelCase(sort),productCount:productCount,swiperProps:swiperProps,productItemProps:productItemProps,isPreview:isPreview,showHeadline:showHeadline,headline:headline});};
+ */
+export const useProductSliderWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config,
+    isPreview,
+    layout
+  } = useWidget();
+  const {
+    products,
+    productCount,
+    sort,
+    showName = false,
+    showPrice = false,
+    showRating = false,
+    slideAutomatic = true,
+    endlessSlider = true,
+    sliderSpeed = 7000,
+    showHeadline = false,
+    headline
+  } = config;
+  const productSearchParams = useMemo(() => getProductSearchParamsFromProductsInputConfig(products), [products]);
+  const swiperProps = useMemo(() => ({
+    autoplay: slideAutomatic,
+    delay: sliderSpeed,
+    loop: endlessSlider,
+    // Prevent cut-off sliders when margins are used in the layout
+    ...(layout.marginLeft || layout.marginRight ? {
+      style: {
+        ...(layout.marginLeft ? {
+          marginLeft: layout.marginLeft * -1,
+          paddingLeft: layout.marginLeft
+        } : {}),
+        ...(layout.marginRight ? {
+          marginRight: layout.marginRight * -1,
+          paddingRight: layout.marginRight
+        } : {})
+      }
+    } : null)
+  }), [slideAutomatic, sliderSpeed, endlessSlider, layout]);
+  const productItemProps = useMemo(() => ({
+    hideName: !showName,
+    hidePrice: !showPrice,
+    hideRating: !showRating
+  }), [showName, showPrice, showRating]);
+  return {
+    ...productSearchParams,
+    sort: _camelCase(sort),
+    productCount,
+    swiperProps,
+    productItemProps,
+    isPreview,
+    showHeadline,
+    headline
+  };
+};

package/page/widgets/ProductSlider/index.js

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

package/page/widgets/RichText/RichText.js

@@ -1,3 +1,28 @@
-import React from'react';import{makeStyles}from'@shopgate/engage/styles';import{WidgetRichText}from'@shopgate/engage/page/components';import{useRichTextWidget}from"./hooks";var useStyles=makeStyles()(function(theme){return{root:{padding:theme.spacing(1)}};});/**
+import React from 'react';
+import { makeStyles } from '@shopgate/engage/styles';
+import { WidgetRichText } from '@shopgate/engage/page/components';
+import { useRichTextWidget } from "./hooks";
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(1)
+  }
+}));
+
+/**
  * @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(WidgetRichText,{content:richText,className:cx(classes.root)});};export default RichText;
+ */
+const RichText = () => {
+  const {
+    richText
+  } = useRichTextWidget();
+  const {
+    cx,
+    classes
+  } = useStyles();
+  if (!richText) return null;
+  return /*#__PURE__*/React.createElement(WidgetRichText, {
+    content: richText,
+    className: cx(classes.root)
+  });
+};
+export default RichText;

package/page/widgets/RichText/hooks.js

@@ -1,10 +1,25 @@
-import{useWidget}from'@shopgate/engage/page/hooks';/**
+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
+ */
+
+// 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};};
+ */
+export const useRichTextWidget = () => {
+  /** @type {UseWidgetReturnType}  */
+  const {
+    config
+  } = useWidget();
+  return {
+    richText: config?.text
+  };
+};

package/page/widgets/RichText/index.js

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