@crystaldesign/widget-image-carousel 25.11.0-beta.9 → 25.11.0-rc.1

package/build/esm/index.js

@@ -1,16 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { useState, useCallback, useEffect } from 'react';
-import { useCss, useProductData, MediaItem, useConfiguration } from '@crystaldesign/widget-library';
-import { useDivaCore } from '@crystaldesign/diva-core';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useCss, useProductData, replaceTemplatesInObject, ActionGroup, Action, MediaItem, useConfiguration } from '@crystaldesign/widget-library';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
+import cloneDeep from 'lodash/cloneDeep';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation } from 'swiper/modules';
 import classNames from 'classnames';
 import 'swiper/css';
 import 'swiper/css/navigation';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 (function() {
     const env = {"STAGE":"production"};
@@ -28,7 +29,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function useImageCarousel(_ref) {
-  var productId = _ref.productId,
+  var productIds = _ref.productIds,
     settings = _ref.settings;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -42,45 +43,63 @@ function useImageCarousel(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     error = _useState6[0],
     setError = _useState6[1];
+  var _useDivaCore = useDivaCore(),
+    openComponent = _useDivaCore.actions.openComponent;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n;
   useCss(settings);
   var _useProductData = useProductData({
-      productIds: productId,
-      widgetType: 'IMAGECAROUSEL'
+      productIds: productIds,
+      widgetType: 'IMAGECAROUSEL',
+      standaloneWidget: settings.type === 'SIMPLE_PRODUCT_LIST'
     }),
     getProductsByDivaNrs = _useProductData.getProductsByDivaNrs,
     getProductByDivaNrAndVariantId = _useProductData.getProductByDivaNrAndVariantId,
     setSelectedProductId = _useProductData.setSelectedProductId,
     selectedProduct = _useProductData.selectedProduct,
-    setProductCache = _useProductData.setProductCache;
+    setProductCache = _useProductData.setProductCache,
+    getSimpleProductListByIds = _useProductData.getSimpleProductListByIds,
+    productVariants = _useProductData.productVariants;
   var onClickProduct = useCallback(function (productId) {
-    setSelectedProductId(productId);
-    if (!settings.disableScrollToTop) {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
+    if (settings.openComponent) {
+      var clonedSettings = cloneDeep(settings);
+      var product = productVariants.find(function (p) {
+        return p._id === productId;
       });
+      if (product) {
+        var action = replaceTemplatesInObject(clonedSettings.openComponent, product, i18n.language);
+        openComponent(action);
+      }
+    } else {
+      setSelectedProductId(productId);
+      if (!settings.disableScrollToTop) {
+        window.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
+      }
     }
-  }, [setSelectedProductId]);
+  }, [setSelectedProductId, settings.openComponent, productVariants]);
   useEffect(function () {
     var loadMockups = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _settings$mediaFuncti, mediaFunctionType, foundMedia, _foundMedia;
+        var _settings$mediaFuncti, mediaFunctionType, foundMedia, _foundMedia, _foundMedia2;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
               setLoading(true);
-              if (!selectedProduct) {
-                _context.next = 19;
+              mediaFunctionType = (_settings$mediaFuncti = settings.mediaFunctionType) !== null && _settings$mediaFuncti !== void 0 ? _settings$mediaFuncti : 'SHO';
+              if (!(selectedProduct && settings.type !== 'SIMPLE_PRODUCT_LIST')) {
+                _context.next = 21;
                 break;
               }
-              mediaFunctionType = (_settings$mediaFuncti = settings.mediaFunctionType) !== null && _settings$mediaFuncti !== void 0 ? _settings$mediaFuncti : 'SHO';
               if (!(settings.type === 'WALL_MOCKUPS')) {
                 _context.next = 11;
                 break;
               }
               _context.next = 7;
-              return getWallMockups(selectedProduct, mediaFunctionType);
+              return getWallMockups(selectedProduct, mediaFunctionType, settings.infoElements);
             case 7:
               foundMedia = _context.sent;
               if (foundMedia) {
@@ -94,7 +113,7 @@ function useImageCarousel(_ref) {
                 break;
               }
               _context.next = 14;
-              return getSimilarProductMedia(selectedProduct, mediaFunctionType, settings.description);
+              return getSimilarProductMedia(selectedProduct, mediaFunctionType, settings.infoElements);
             case 14:
               _foundMedia = _context.sent;
               if (_foundMedia) {
@@ -103,44 +122,63 @@ function useImageCarousel(_ref) {
               _context.next = 19;
               break;
             case 18:
-              throw new Error('Invalid type');
+              throw new Error('Invalid type or invalid data');
             case 19:
-              _context.next = 25;
+              _context.next = 29;
               break;
             case 21:
-              _context.prev = 21;
+              if (!(productIds !== null && productIds !== void 0 && productIds.length && settings.type === 'SIMPLE_PRODUCT_LIST')) {
+                _context.next = 28;
+                break;
+              }
+              _context.next = 24;
+              return getSimpleProductList(productIds, mediaFunctionType, settings.infoElements);
+            case 24:
+              _foundMedia2 = _context.sent;
+              if (_foundMedia2) {
+                setMedia(_foundMedia2);
+              }
+              _context.next = 29;
+              break;
+            case 28:
+              throw new Error('Invalid type or invalid data');
+            case 29:
+              _context.next = 35;
+              break;
+            case 31:
+              _context.prev = 31;
               _context.t0 = _context["catch"](0);
               console.error(_context.t0);
               setError(_context.t0);
-            case 25:
-              _context.prev = 25;
+            case 35:
+              _context.prev = 35;
               setLoading(false);
-              return _context.finish(25);
-            case 28:
+              return _context.finish(35);
+            case 38:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 21, 25, 28]]);
+        }, _callee, null, [[0, 31, 35, 38]]);
       }));
       return function loadMockups() {
         return _ref2.apply(this, arguments);
       };
     }();
-    if (selectedProduct && productId) {
+    if (selectedProduct || productIds !== null && productIds !== void 0 && productIds.length && settings.type === 'SIMPLE_PRODUCT_LIST') {
       loadMockups();
     }
-  }, [selectedProduct, productId]);
+  }, [selectedProduct, productIds]);
   return {
     media: media,
     error: error,
     loading: loading,
-    setSelectedProductId: onClickProduct
+    onClickProduct: onClickProduct
   };
-  function getWallMockups(_x, _x2) {
+  function getWallMockups(_x, _x2, _x3) {
     return _getWallMockups.apply(this, arguments);
   }
   function _getWallMockups() {
-    _getWallMockups = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(product, wallMockupFunctionType) {
+    _getWallMockups = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(product, wallMockupFunctionType, infoElements) {
       var _product$customData, _product$customData2, _product$customData3;
       var wallMockupDivaNrs, wallMockupProducts, optCodex, opvMapping, optOpvPairsToSearch, media, _loop, i;
       return _regeneratorRuntime.wrap(function _callee2$(_context5) {
@@ -206,7 +244,8 @@ function useImageCarousel(_ref) {
                             })) === null || _variant$media === void 0 ? void 0 : _variant$media.url;
                             media.push({
                               url: mediaUrl,
-                              productId: variant._id
+                              productId: variant._id,
+                              infoElements: infoElements ? addInfoElements(infoElements, variant) : undefined
                             });
                             return _context3.abrupt("return", 1);
                           case 8:
@@ -266,7 +305,8 @@ function useImageCarousel(_ref) {
                                 })) === null || _targetProduct$media === void 0 ? void 0 : _targetProduct$media.url;
                                 media.push({
                                   url: mediaUrl,
-                                  productId: targetProduct._id
+                                  productId: targetProduct._id,
+                                  infoElements: infoElements ? addInfoElements(infoElements, targetProduct) : undefined
                                 });
                               }
                             }
@@ -331,13 +371,13 @@ function useImageCarousel(_ref) {
       });
     });
   }
-  function getSimilarProductMedia(_x3, _x4, _x5) {
+  function getSimilarProductMedia(_x4, _x5, _x6) {
     return _getSimilarProductMedia.apply(this, arguments);
   }
   function _getSimilarProductMedia() {
-    _getSimilarProductMedia = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(product, mediaFunctionType, description) {
+    _getSimilarProductMedia = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(product, mediaFunctionType, infoElements) {
       var _product$customData4;
-      var similarProductsDivaNr, similarProducts, media, i, _similarProduct$media, _similarProduct$media2, similarProduct, mediaUrl, desc, _similarProduct$descr;
+      var similarProductsDivaNr, similarProducts, media, i, _similarProduct$media, _similarProduct$media2, similarProduct, mediaUrl;
       return _regeneratorRuntime.wrap(function _callee4$(_context7) {
         while (1) switch (_context7.prev = _context7.next) {
           case 0:
@@ -367,7 +407,7 @@ function useImageCarousel(_ref) {
                   }
                 }, _callee3);
               }));
-              return function (_x6) {
+              return function (_x10) {
                 return _ref3.apply(this, arguments);
               };
             }()));
@@ -380,14 +420,10 @@ function useImageCarousel(_ref) {
               mediaUrl = (_similarProduct$media = similarProduct === null || similarProduct === void 0 || (_similarProduct$media2 = similarProduct.media) === null || _similarProduct$media2 === void 0 || (_similarProduct$media2 = _similarProduct$media2.find(function (m) {
                 return m.functionType === mediaFunctionType;
               })) === null || _similarProduct$media2 === void 0 ? void 0 : _similarProduct$media2.url) !== null && _similarProduct$media !== void 0 ? _similarProduct$media : similarProduct.image;
-              desc = undefined;
               if (mediaUrl) {
-                if (description) {
-                  desc = (_similarProduct$descr = similarProduct[description]) !== null && _similarProduct$descr !== void 0 ? _similarProduct$descr : description;
-                }
                 media.push({
                   url: mediaUrl,
-                  description: desc,
+                  infoElements: infoElements ? addInfoElements(infoElements, similarProduct) : undefined,
                   productId: similarProduct._id
                 });
               }
@@ -401,14 +437,172 @@ function useImageCarousel(_ref) {
     }));
     return _getSimilarProductMedia.apply(this, arguments);
   }
+  function getSimpleProductList(_x7, _x8, _x9) {
+    return _getSimpleProductList.apply(this, arguments);
+  }
+  function _getSimpleProductList() {
+    _getSimpleProductList = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(productIds, mediaFunctionType, infoElements) {
+      var productIdsArray, products, media, _iterator2, _step2, _p$media$find$url, _p$media, p, mediaUrl;
+      return _regeneratorRuntime.wrap(function _callee5$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            productIdsArray = Array.isArray(productIds) ? productIds : productIds.split(';');
+            _context8.next = 3;
+            return getSimpleProductListByIds(productIdsArray);
+          case 3:
+            products = _context8.sent;
+            media = [];
+            _iterator2 = _createForOfIteratorHelper(products.data);
+            try {
+              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                p = _step2.value;
+                mediaUrl = (_p$media$find$url = p === null || p === void 0 || (_p$media = p.media) === null || _p$media === void 0 || (_p$media = _p$media.find(function (m) {
+                  return m.functionType === mediaFunctionType;
+                })) === null || _p$media === void 0 ? void 0 : _p$media.url) !== null && _p$media$find$url !== void 0 ? _p$media$find$url : p.image;
+                media.push({
+                  url: mediaUrl,
+                  productId: p._id,
+                  infoElements: infoElements ? addInfoElements(infoElements, p) : undefined
+                });
+              }
+            } catch (err) {
+              _iterator2.e(err);
+            } finally {
+              _iterator2.f();
+            }
+            return _context8.abrupt("return", media);
+          case 8:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee5);
+    }));
+    return _getSimpleProductList.apply(this, arguments);
+  }
 }
+var addInfoElements = function addInfoElements(infoElements, product) {
+  var infoEl = {};
+  if (infoElements) {
+    var _iterator3 = _createForOfIteratorHelper(infoElements),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var infoElement = _step3.value;
+        if (infoElement.text) {
+          var _infoElement$text;
+          infoEl[infoElement.text] = (_infoElement$text = product[infoElement.text]) !== null && _infoElement$text !== void 0 ? _infoElement$text : infoElement.text;
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  }
+  return infoEl;
+};
+
+var OpenConfiguratorButton = function OpenConfiguratorButton(_ref) {
+  var _settings$ctaText;
+  var settings = _ref.settings,
+    onClick = _ref.onClick;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (!settings.enabled) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("button", {
+    className: classNames('widget-image-carousel-open-configurator-button', settings.className),
+    onClick: onClick,
+    children: /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/jsx("span", {
+        className: "widget-image-carousel-open-configurator-text",
+        children: (_settings$ctaText = settings.ctaText) !== null && _settings$ctaText !== void 0 ? _settings$ctaText : t('configurator.CONFIGURE_NOW')
+      }), settings.ctaIcon && /*#__PURE__*/jsx("img", {
+        src: settings.ctaIcon,
+        alt: "Configurator Icon",
+        className: "widget-image-carousel-open-configurator-icon"
+      })]
+    })
+  });
+};
+
+var InfoElementComponent = function InfoElementComponent(_ref) {
+  var _media$infoElements, _infoElement$text;
+  var infoElement = _ref.infoElement,
+    media = _ref.media;
+  switch (infoElement.type) {
+    case 'text':
+      return /*#__PURE__*/jsx("span", {
+        className: infoElement.className,
+        children: (_media$infoElements = media.infoElements) === null || _media$infoElements === void 0 ? void 0 : _media$infoElements[(_infoElement$text = infoElement.text) !== null && _infoElement$text !== void 0 ? _infoElement$text : '']
+      });
+    case 'cta':
+      {
+        return /*#__PURE__*/jsx(CallToAction, {
+          config: infoElement.action
+        });
+      }
+    default:
+      return /*#__PURE__*/jsx("span", {
+        children: "Invalid InfoElement - Check Config"
+      });
+  }
+};
+function CallToAction(_ref2) {
+  var config = _ref2.config;
+  if ('actions' in config) {
+    return /*#__PURE__*/jsx(ActionGroup, {
+      config: config
+    });
+  }
+  return /*#__PURE__*/jsx(Action, {
+    config: config
+  });
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var slideInfoElement = "slideInfoElement-hvOw3";
+var css_248z = ".imageCarouselContainer-5xR1Z {\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 20px;\n}\n\n.imageCarousel-doGe7 {\n  height: 100%;\n  width: 100%;\n}\n\n.slide-kzTjO {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.slideImage-25uCG {\n  max-height: 100%;\n  max-width: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  cursor: pointer;\n}\n\n.slideDescriptionImage-qebF3 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n}\n\n.slideDescriptionImage-qebF3 img {\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  max-height: 75%;\n  height: auto;\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.slideDescription-UOsb1 {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 25%;\n  background: lightgrey;\n  color: black;\n  text-align: center;\n}\n\n.slideDescription-UOsb1 span {\n  font-size: 26px;\n}\n\n.slideInfoElement-hvOw3 {\n  display: flex;\n  flex-direction: column;\n}\n";
+styleInject(css_248z);
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SwiperComponent = function SwiperComponent(_ref) {
+  var _settings$sliderProp;
   var media = _ref.media,
     settings = _ref.settings,
-    setSelectedProductId = _ref.setSelectedProductId;
+    onClickProduct = _ref.onClickProduct,
+    isMobile = _ref.isMobile;
   return /*#__PURE__*/jsx("div", {
     className: classNames(['diva-widget-image-carousel-container']),
     children: /*#__PURE__*/jsx(Swiper, _objectSpread$1(_objectSpread$1({
@@ -416,13 +610,18 @@ var SwiperComponent = function SwiperComponent(_ref) {
       navigation: true,
       className: classNames(['diva-widget-image-carousel-swiper'])
     }, settings.sliderProp), {}, {
+      loop: ((_settings$sliderProp = settings.sliderProp) === null || _settings$sliderProp === void 0 ? void 0 : _settings$sliderProp.loop) && media.length > 1,
       children: media.map(function (m, i) {
+        var _settings$infoElement, _settings$openConfigu, _settings$openConfigu2, _settings$infoElement2, _settings$openConfigu3, _settings$openConfigu4;
         return /*#__PURE__*/jsx(SwiperSlide, {
           className: classNames(['diva-widget-image-carousel-slide']),
-          children: settings.description ? /*#__PURE__*/jsxs("div", {
+          onClick: function onClick() {
+            return onClickProduct(m.productId);
+          },
+          children: (_settings$infoElement = settings.infoElements) !== null && _settings$infoElement !== void 0 && _settings$infoElement.length ? /*#__PURE__*/jsxs("div", {
             className: classNames(['diva-widget-image-carousel-slide-description-image']),
             onClick: function onClick() {
-              return setSelectedProductId(m.productId);
+              return onClickProduct(m.productId);
             },
             children: [/*#__PURE__*/jsx(MediaItem, {
               mediaUrl: m.url,
@@ -430,24 +629,51 @@ var SwiperComponent = function SwiperComponent(_ref) {
               config: {
                 disableSirv: false,
                 sirvProps: settings.sirvProps
+              },
+              overlay: !isMobile && (_settings$openConfigu = settings.openConfiguratorCta) !== null && _settings$openConfigu !== void 0 && _settings$openConfigu.enabled ? /*#__PURE__*/jsx(OpenConfiguratorButton, {
+                settings: settings.openConfiguratorCta,
+                onClick: function onClick() {
+                  return onClickProduct(m.productId);
+                }
+              }) : undefined
+            }), ((_settings$openConfigu2 = settings.openConfiguratorCta) === null || _settings$openConfigu2 === void 0 ? void 0 : _settings$openConfigu2.enabled) && isMobile && /*#__PURE__*/jsx(OpenConfiguratorButton, {
+              settings: settings.openConfiguratorCta,
+              onClick: function onClick() {
+                return onClickProduct(m.productId);
               }
             }), /*#__PURE__*/jsx("div", {
-              className: classNames(['diva-widget-image-carousel-slide-description']),
-              children: /*#__PURE__*/jsx("span", {
-                children: m.description
+              className: classNames([slideInfoElement, 'diva-widget-image-carousel-slide-info']),
+              children: (_settings$infoElement2 = settings.infoElements) === null || _settings$infoElement2 === void 0 ? void 0 : _settings$infoElement2.map(function (infoElement) {
+                return /*#__PURE__*/jsx(InfoElementComponent, {
+                  infoElement: infoElement,
+                  media: m
+                });
               })
             })]
-          }) : /*#__PURE__*/jsx(MediaItem, {
-            mediaUrl: m.url,
-            isCurrentlyVisible: true,
-            config: {
-              disableSirv: false,
-              sirvProps: settings.sirvProps
-            },
-            className: classNames(['diva-widget-image-carousel-slide-image']),
-            onClick: function onClick() {
-              return setSelectedProductId(m.productId);
-            }
+          }) : /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(MediaItem, {
+              mediaUrl: m.url,
+              isCurrentlyVisible: true,
+              config: {
+                disableSirv: false,
+                sirvProps: settings.sirvProps
+              },
+              className: classNames(['diva-widget-image-carousel-slide-image']),
+              onClick: function onClick() {
+                return onClickProduct(m.productId);
+              },
+              overlay: !isMobile && (_settings$openConfigu3 = settings.openConfiguratorCta) !== null && _settings$openConfigu3 !== void 0 && _settings$openConfigu3.enabled ? /*#__PURE__*/jsx(OpenConfiguratorButton, {
+                settings: settings.openConfiguratorCta,
+                onClick: function onClick() {
+                  return onClickProduct(m.productId);
+                }
+              }) : undefined
+            }), ((_settings$openConfigu4 = settings.openConfiguratorCta) === null || _settings$openConfigu4 === void 0 ? void 0 : _settings$openConfigu4.enabled) && isMobile && /*#__PURE__*/jsx(OpenConfiguratorButton, {
+              settings: settings.openConfiguratorCta,
+              onClick: function onClick() {
+                return onClickProduct(m.productId);
+              }
+            })]
           })
         }, i);
       })
@@ -458,16 +684,17 @@ var SwiperComponent = function SwiperComponent(_ref) {
 var ImageList = function ImageList(_ref) {
   var media = _ref.media,
     settings = _ref.settings,
-    setSelectedProductId = _ref.setSelectedProductId;
+    onClickProduct = _ref.onClickProduct;
   return /*#__PURE__*/jsx("div", {
     className: classNames(['diva-widget-image-list']),
     children: media.map(function (m, i) {
+      var _settings$infoElement, _settings$openConfigu, _settings$infoElement2, _settings$openConfigu2;
       return /*#__PURE__*/jsx("div", {
         className: classNames(['diva-widget-image-list-item']),
-        children: settings.description ? /*#__PURE__*/jsxs("div", {
+        children: (_settings$infoElement = settings.infoElements) !== null && _settings$infoElement !== void 0 && _settings$infoElement.length ? /*#__PURE__*/jsxs("div", {
           className: classNames(['diva-widget-image-list-item-description-image']),
           onClick: function onClick() {
-            return setSelectedProductId(m.productId);
+            return onClickProduct(m.productId);
           },
           children: [/*#__PURE__*/jsx(MediaItem, {
             mediaUrl: m.url,
@@ -476,23 +703,38 @@ var ImageList = function ImageList(_ref) {
               disableSirv: false,
               sirvProps: settings.sirvProps
             }
+          }), ((_settings$openConfigu = settings.openConfiguratorCta) === null || _settings$openConfigu === void 0 ? void 0 : _settings$openConfigu.enabled) && /*#__PURE__*/jsx(OpenConfiguratorButton, {
+            settings: settings.openConfiguratorCta,
+            onClick: function onClick() {
+              return onClickProduct(m.productId);
+            }
           }), /*#__PURE__*/jsx("div", {
-            className: classNames(['diva-widget-image-list-item-description']),
-            children: /*#__PURE__*/jsx("span", {
-              children: m.description
+            className: classNames(['diva-widget-image-list-item-info']),
+            children: (_settings$infoElement2 = settings.infoElements) === null || _settings$infoElement2 === void 0 ? void 0 : _settings$infoElement2.map(function (infoElement) {
+              return /*#__PURE__*/jsx(InfoElementComponent, {
+                infoElement: infoElement,
+                media: m
+              });
             })
           })]
-        }) : /*#__PURE__*/jsx(MediaItem, {
-          mediaUrl: m.url,
-          isCurrentlyVisible: true,
-          config: {
-            disableSirv: false,
-            sirvProps: settings.sirvProps
-          },
-          className: classNames(['diva-widget-image-list-item-image']),
-          onClick: function onClick() {
-            return setSelectedProductId(m.productId);
-          }
+        }) : /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(MediaItem, {
+            mediaUrl: m.url,
+            isCurrentlyVisible: true,
+            config: {
+              disableSirv: false,
+              sirvProps: settings.sirvProps
+            },
+            className: classNames(['diva-widget-image-list-item-image']),
+            onClick: function onClick() {
+              return onClickProduct(m.productId);
+            }
+          }), ((_settings$openConfigu2 = settings.openConfiguratorCta) === null || _settings$openConfigu2 === void 0 ? void 0 : _settings$openConfigu2.enabled) && /*#__PURE__*/jsx(OpenConfiguratorButton, {
+            settings: settings.openConfiguratorCta,
+            onClick: function onClick() {
+              return onClickProduct(m.productId);
+            }
+          })]
         })
       }, i);
     })
@@ -504,35 +746,39 @@ function MainComponent(props) {
     media = _useImageCarousel.media,
     error = _useImageCarousel.error;
     _useImageCarousel.loading;
-    var setSelectedProductId = _useImageCarousel.setSelectedProductId;
+    var onClickProduct = _useImageCarousel.onClickProduct;
   var _useDivaCore = useDivaCore(),
     isMobile = _useDivaCore.state.isMobile;
   if (error) return /*#__PURE__*/jsx("div", {
     children: "Error"
   });
-  if (isMobile && !props.settings.avoidUsingSwiperOnMobile) {
+  if (isMobile && props.settings.avoidUsingSwiperOnMobile) {
     return /*#__PURE__*/jsx(ImageList, {
       media: media,
       settings: props.settings,
-      setSelectedProductId: setSelectedProductId
+      onClickProduct: onClickProduct
     });
   }
   return /*#__PURE__*/jsx(SwiperComponent, {
     media: media,
     settings: props.settings,
-    setSelectedProductId: setSelectedProductId
+    onClickProduct: onClickProduct,
+    isMobile: isMobile
   });
 }
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Main = function Main(_ref) {
-  var _parameters$productId;
   var settings = _ref.settings,
     parameters = _ref.parameters;
+  var productIds = useMemo(function () {
+    var _parameters$productId, _parameters$productId2;
+    return (_parameters$productId = parameters === null || parameters === void 0 || (_parameters$productId2 = parameters.productIds) === null || _parameters$productId2 === void 0 ? void 0 : _parameters$productId2.split(';')) !== null && _parameters$productId !== void 0 ? _parameters$productId : [];
+  }, [parameters === null || parameters === void 0 ? void 0 : parameters.productIds]);
   return /*#__PURE__*/jsx(ImageCarouselComponent, {
     settings: settings,
-    productId: (_parameters$productId = parameters === null || parameters === void 0 ? void 0 : parameters.productId) !== null && _parameters$productId !== void 0 ? _parameters$productId : ''
+    productIds: productIds
   });
 };
 var ImageCarouselComponent = function ImageCarouselComponent(props) {

package/build/types/widget-image-carousel/src/components/ImageList/index.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Media } from '@crystaldesign/widget-image-carousel/useImageCarousel';
-import { Configuration } from '@crystaldesign/widget-image-carousel/types';
+import { Configuration, Media } from '@crystaldesign/widget-image-carousel/types';
 interface ImageListProps {
     media: Media[];
     settings: Configuration;
-    setSelectedProductId: (id: string) => void;
+    onClickProduct: (id: string) => void;
 }
 export declare const ImageList: React.FC<ImageListProps>;
 export {};

package/build/types/widget-image-carousel/src/components/ImageList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ImageList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAE,MAAM,uDAAuD,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;IACxB,oBAAoB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyB9C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ImageList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAe,MAAM,4CAA4C,CAAC;AAI/F,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiC9C,CAAC"}

package/build/types/widget-image-carousel/src/components/InfoElement/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InfoElement, Media } from '../../types';
+interface InfoElementComponentProps {
+    infoElement: InfoElement;
+    media: Media;
+}
+export declare const InfoElementComponent: React.FC<InfoElementComponentProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map