@crystaldesign/widget-image-carousel 25.9.0-rc.9 → 25.10.0-beta.10

package/build/esm/index.js

@@ -1,14 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useState, useCallback, useEffect } from 'react';
-import { useCss, useProductData, useConfiguration } from '@crystaldesign/widget-library';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/navigation';
+import { useCss, useProductData, MediaItem, useConfiguration } from '@crystaldesign/widget-library';
+import { useDivaCore } 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 { 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';
 
 (function() {
@@ -402,92 +403,125 @@ function useImageCarousel(_ref) {
   }
 }
 
-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 imageCarouselContainer = "imageCarouselContainer-5xR1Z";
-var imageCarousel = "imageCarousel-doGe7";
-var slide = "slide-kzTjO";
-var slideImage = "slideImage-25uCG";
-var slideDescriptionImage = "slideDescriptionImage-qebF3";
-var slideDescription = "slideDescription-UOsb1";
-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";
-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; }
-function MainComponent(props) {
-  var _useImageCarousel = useImageCarousel(props),
-    media = _useImageCarousel.media,
-    error = _useImageCarousel.error,
-    loading = _useImageCarousel.loading,
-    setSelectedProductId = _useImageCarousel.setSelectedProductId;
-  if (loading) return /*#__PURE__*/jsx("div", {
-    children: "Loading..."
-  });
-  if (error) return /*#__PURE__*/jsx("div", {
-    children: "Error"
-  });
+var SwiperComponent = function SwiperComponent(_ref) {
+  var media = _ref.media,
+    settings = _ref.settings,
+    setSelectedProductId = _ref.setSelectedProductId;
   return /*#__PURE__*/jsx("div", {
-    className: classNames([imageCarouselContainer, 'diva-widget-image-carousel-container']),
+    className: classNames(['diva-widget-image-carousel-container']),
     children: /*#__PURE__*/jsx(Swiper, _objectSpread$1(_objectSpread$1({
       modules: [Navigation],
       navigation: true,
-      className: classNames([imageCarousel, 'diva-widget-image-carousel-swiper'])
-    }, props.settings.sliderProp), {}, {
+      className: classNames(['diva-widget-image-carousel-swiper'])
+    }, settings.sliderProp), {}, {
       children: media.map(function (m, i) {
         return /*#__PURE__*/jsx(SwiperSlide, {
-          className: classNames([slide, 'diva-widget-image-carousel-slide']),
-          children: props.settings.description ? /*#__PURE__*/jsxs("div", {
-            className: classNames([slideDescriptionImage, 'diva-widget-image-carousel-slide-description-image']),
+          className: classNames(['diva-widget-image-carousel-slide']),
+          children: settings.description ? /*#__PURE__*/jsxs("div", {
+            className: classNames(['diva-widget-image-carousel-slide-description-image']),
             onClick: function onClick() {
               return setSelectedProductId(m.productId);
             },
-            children: [/*#__PURE__*/jsx("img", {
-              src: m.url,
-              alt: "carousel image"
+            children: [/*#__PURE__*/jsx(MediaItem, {
+              mediaUrl: m.url,
+              isCurrentlyVisible: true,
+              config: {
+                disableSirv: false,
+                sirvProps: settings.sirvProps
+              }
             }), /*#__PURE__*/jsx("div", {
-              className: classNames([slideDescription, 'diva-widget-image-carousel-slide-description']),
+              className: classNames(['diva-widget-image-carousel-slide-description']),
               children: /*#__PURE__*/jsx("span", {
                 children: m.description
               })
             })]
-          }) : /*#__PURE__*/jsx("img", {
-            src: m.url,
-            alt: "carousel image",
-            className: classNames([slideImage, 'diva-widget-image-carousel-slide-image']),
+          }) : /*#__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);
             }
-          }, m.productId + 'img')
-        }, m.productId);
+          })
+        }, i);
       })
     }))
   });
+};
+
+var ImageList = function ImageList(_ref) {
+  var media = _ref.media,
+    settings = _ref.settings,
+    setSelectedProductId = _ref.setSelectedProductId;
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(['diva-widget-image-list']),
+    children: media.map(function (m, i) {
+      return /*#__PURE__*/jsx("div", {
+        className: classNames(['diva-widget-image-list-item']),
+        children: settings.description ? /*#__PURE__*/jsxs("div", {
+          className: classNames(['diva-widget-image-list-item-description-image']),
+          onClick: function onClick() {
+            return setSelectedProductId(m.productId);
+          },
+          children: [/*#__PURE__*/jsx(MediaItem, {
+            mediaUrl: m.url,
+            isCurrentlyVisible: true,
+            config: {
+              disableSirv: false,
+              sirvProps: settings.sirvProps
+            }
+          }), /*#__PURE__*/jsx("div", {
+            className: classNames(['diva-widget-image-list-item-description']),
+            children: /*#__PURE__*/jsx("span", {
+              children: m.description
+            })
+          })]
+        }) : /*#__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);
+          }
+        })
+      }, i);
+    })
+  });
+};
+
+function MainComponent(props) {
+  var _useImageCarousel = useImageCarousel(props),
+    media = _useImageCarousel.media,
+    error = _useImageCarousel.error;
+    _useImageCarousel.loading;
+    var setSelectedProductId = _useImageCarousel.setSelectedProductId;
+  var _useDivaCore = useDivaCore(),
+    isMobile = _useDivaCore.state.isMobile;
+  if (error) return /*#__PURE__*/jsx("div", {
+    children: "Error"
+  });
+  if (isMobile && !props.settings.avoidUsingSwiperOnMobile) {
+    return /*#__PURE__*/jsx(ImageList, {
+      media: media,
+      settings: props.settings,
+      setSelectedProductId: setSelectedProductId
+    });
+  }
+  return /*#__PURE__*/jsx(SwiperComponent, {
+    media: media,
+    settings: props.settings,
+    setSelectedProductId: setSelectedProductId
+  });
 }
 
 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; }

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Media } from '@crystaldesign/widget-image-carousel/useImageCarousel';
+import { Configuration } from '@crystaldesign/widget-image-carousel/types';
+interface SwiperComponentProps {
+    media: Media[];
+    settings: Configuration;
+    setSelectedProductId: (id: string) => void;
+}
+export declare const SwiperComponent: React.FC<SwiperComponentProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,KAAK,EAAE,MAAM,uDAAuD,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,UAAU,oBAAoB;IAC5B,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;IACxB,oBAAoB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2B1D,CAAC"}

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

@@ -1,6 +1,4 @@
 import React from 'react';
-import 'swiper/css';
-import 'swiper/css/navigation';
 import { ImageCarouselProps } from '../types';
 export default function MainComponent(props: ImageCarouselProps): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,YAAY,CAAC;AACpB,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAM9C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAwC9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAW9D"}

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

@@ -10,5 +10,9 @@ export interface Configuration extends BaseConfiguration {
     description?: string;
     sliderProp?: SwiperProps;
     disableScrollToTop?: boolean;
+    sirvProps?: {
+        [data: string]: string;
+    };
+    avoidUsingSwiperOnMobile?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

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,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,cAAc,GAAG,kBAAkB,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,aAAa,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,IAAI,EAAE,cAAc,GAAG,kBAAkB,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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;CACpC"}

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

@@ -1,5 +1,5 @@
 import { ImageCarouselProps } from './types';
-interface Media {
+export interface Media {
     url: string;
     description?: string;
     productId: string;
@@ -10,5 +10,4 @@ export declare function useImageCarousel({ productId, settings }: ImageCarouselP
     loading: boolean;
     setSelectedProductId: (productId: string) => void;
 };
-export {};
 //# sourceMappingURL=useImageCarousel.d.ts.map

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,MAAM,SAAS,CAAC;AAM7C,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB;;;;sCAa5D,MAAM;EA6JrB"}
+{"version":3,"file":"useImageCarousel.d.ts","sourceRoot":"","sources":["../../../../src/useImageCarousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAM7C,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB;;;;sCAa5D,MAAM;EA6JrB"}