@crystaldesign/widget-image-carousel 25.11.0-beta.30 → 25.11.0-beta.31

package/build/esm/index.js

@@ -1,10 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useState, useCallback, useEffect, useMemo } from 'react';
-import { useCss, useProductData, ActionGroup, Action, MediaItem, useConfiguration } from '@crystaldesign/widget-library';
+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';
@@ -44,6 +45,8 @@ function useImageCarousel(_ref) {
     setError = _useState6[1];
   var _useDivaCore = useDivaCore(),
     openComponent = _useDivaCore.actions.openComponent;
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n;
   useCss(settings);
   var _useProductData = useProductData({
       productIds: productIds,
@@ -55,11 +58,18 @@ function useImageCarousel(_ref) {
     setSelectedProductId = _useProductData.setSelectedProductId,
     selectedProduct = _useProductData.selectedProduct,
     setProductCache = _useProductData.setProductCache,
-    getSimpleProductListByIds = _useProductData.getSimpleProductListByIds;
+    getSimpleProductListByIds = _useProductData.getSimpleProductListByIds,
+    productVariants = _useProductData.productVariants;
   var onClickProduct = useCallback(function (productId) {
-    var _settings$openConfigu;
-    if ((_settings$openConfigu = settings.openConfiguratorCta) !== null && _settings$openConfigu !== void 0 && _settings$openConfigu.enabled) {
-      openConfigurator(productId);
+    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) {
@@ -69,17 +79,7 @@ function useImageCarousel(_ref) {
         });
       }
     }
-  }, [setSelectedProductId, settings.openConfiguratorCta]);
-  var openConfigurator = function openConfigurator(productId) {
-    openComponent({
-      type: 'DIVA_WEBPLANNER',
-      parameters: {
-        productId: productId
-      },
-      openInFullscreen: true,
-      absoluteFullscreen: true
-    });
-  };
+  }, [setSelectedProductId, settings.openComponent, productVariants]);
   useEffect(function () {
     var loadMockups = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -536,7 +536,7 @@ var InfoElementComponent = function InfoElementComponent(_ref) {
     media = _ref.media;
   switch (infoElement.type) {
     case 'text':
-      return /*#__PURE__*/jsx("p", {
+      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 : '']
       });
@@ -564,6 +564,37 @@ function CallToAction(_ref2) {
   });
 }
 
+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) {
@@ -584,6 +615,9 @@ var SwiperComponent = function SwiperComponent(_ref) {
         var _settings$infoElement, _settings$openConfigu, _settings$openConfigu2, _settings$infoElement2, _settings$openConfigu3, _settings$openConfigu4;
         return /*#__PURE__*/jsx(SwiperSlide, {
           className: classNames(['diva-widget-image-carousel-slide']),
+          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() {
@@ -608,7 +642,7 @@ var SwiperComponent = function SwiperComponent(_ref) {
                 return onClickProduct(m.productId);
               }
             }), /*#__PURE__*/jsx("div", {
-              className: classNames(['diva-widget-image-carousel-slide-info']),
+              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,

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

@@ -2,10 +2,11 @@ import React from 'react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Configuration, Media } from '@crystaldesign/widget-image-carousel/types';
+import { Action } from '@crystaldesign/diva-core';
 interface SwiperComponentProps {
     media: Media[];
     settings: Configuration;
-    onClickProduct: (id: string) => void;
+    onClickProduct: (id: string, openComponent?: Action) => void;
     isMobile: boolean;
 }
 export declare const SwiperComponent: React.FC<SwiperComponentProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Swiper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,YAAY,CAAC;AACpB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAe,KAAK,EAAE,MAAM,4CAA4C,CAAC;AAI/F,UAAU,oBAAoB;IAC5B,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuD1D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Swiper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,YAAY,CAAC;AACpB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAe,KAAK,EAAE,MAAM,4CAA4C,CAAC;AAI/F,OAAO,EAAE,MAAM,EAAe,MAAM,0BAA0B,CAAC;AAE/D,UAAU,oBAAoB;IAC5B,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;IACxB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuD1D,CAAC"}

package/build/types/widget-image-carousel/src/stories/SimpleProductList/kirchner-prod.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kirchner-prod.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/SimpleProductList/kirchner-prod.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAqB,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAmBhD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAoDxD,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}
+{"version":3,"file":"kirchner-prod.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/SimpleProductList/kirchner-prod.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAqB,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAmBhD,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAuFxD,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

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

@@ -1,3 +1,4 @@
+import { Action } from '@crystaldesign/diva-core';
 import { ActionConfig, ActionGroupConfig, BaseConfiguration } from '@crystaldesign/widget-library';
 import { SwiperProps } from 'swiper/react';
 export interface ImageCarouselProps {
@@ -20,6 +21,13 @@ export interface Configuration extends BaseConfiguration {
         ctaText?: string;
         ctaIcon?: string;
     };
+    openComponent?: Action;
+}
+export interface InfoElement {
+    type: 'text' | 'cta';
+    text?: string;
+    className: string;
+    action?: ActionConfig | ActionGroupConfig;
 }
 export interface InfoElement {
     type: 'text' | 'cta';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;IAClE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACvC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,mBAAmB,CAAC,EAAE;QACpB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC;CAC3C;AAED,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IAEZ,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;IAClE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACvC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,mBAAmB,CAAC,EAAE;QACpB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC;CAC3C;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,GAAG,iBAAiB,CAAC;CAC3C;AAED,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IAEZ,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACzC,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/build/types/widget-image-carousel/src/useImageCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useImageCarousel.d.ts","sourceRoot":"","sources":["../../../../src/useImageCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAe,KAAK,EAAE,MAAM,SAAS,CAAC;AAKjE,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,kBAAkB;;;;gCAkB7D,MAAM;EA0MrB"}
+{"version":3,"file":"useImageCarousel.d.ts","sourceRoot":"","sources":["../../../../src/useImageCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAe,KAAK,EAAE,MAAM,SAAS,CAAC;AAMjE,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,kBAAkB;;;;gCA2B7D,MAAM;EA+MrB"}