@hitachivantara/uikit-react-lab 4.0.1-next.1 → 4.0.1-next.2

package/dist/ImageCarousel/ImageCarousel.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { StandardProps } from "@mui/material";
+
+export type HvImageCarouselClassKey = "root";
+
+export type HvImageCarouselProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvImageCarouselClassKey
+>;
+
+export default function HvImageCarousel(props: HvImageCarouselProps): JSX.Element | null;

package/dist/ImageCarousel/ImageCarousel.js

@@ -0,0 +1,666 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/styles");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _styles2 = _interopRequireDefault(require("./styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _Close, _Fullscreen, _Backwards, _Forwards, _Backwards2, _Forwards2;
+
+var _excluded = ["className", "classes", "documents", "title", "id", "fullscreen", "thumbnails", "lowCardinality", "infiniteCarousel", "xs", "onChange", "counter", "currentStep", "setCurrentStep", "visibleArrows", "variant"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * ImageCarousel description/documentation paragraph
+ */
+var HvImageCarousel = function HvImageCarousel(props) {
+  var className = props.className,
+      classes = props.classes,
+      documents = props.documents,
+      title = props.title,
+      id = props.id,
+      _props$fullscreen = props.fullscreen,
+      fullscreenProp = _props$fullscreen === void 0 ? false : _props$fullscreen,
+      _props$thumbnails = props.thumbnails,
+      thumbnails = _props$thumbnails === void 0 ? false : _props$thumbnails,
+      _props$lowCardinality = props.lowCardinality,
+      lowCardinality = _props$lowCardinality === void 0 ? false : _props$lowCardinality,
+      _props$infiniteCarous = props.infiniteCarousel,
+      infiniteCarousel = _props$infiniteCarous === void 0 ? false : _props$infiniteCarous,
+      _props$xs = props.xs,
+      xs = _props$xs === void 0 ? false : _props$xs,
+      onChange = props.onChange,
+      _props$counter = props.counter,
+      counter = _props$counter === void 0 ? false : _props$counter,
+      _props$currentStep = props.currentStep,
+      currentStep = _props$currentStep === void 0 ? 0 : _props$currentStep,
+      setCurrentStep = props.setCurrentStep,
+      _props$visibleArrows = props.visibleArrows,
+      visibleArrows = _props$visibleArrows === void 0 ? false : _props$visibleArrows,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? "contain" : _props$variant,
+      others = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var elementId = (0, _uikitReactCore.useUniqueId)(id, "hvcarousel");
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      fullscreen = _useState2[0],
+      setFullscreen = _useState2[1];
+
+  var options = documents.map(function (element) {
+    return {
+      src: element.src,
+      value: (0, _uikitReactCore.setId)(elementId, element.value)
+    };
+  });
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      sliceStart = _useState4[0],
+      setSliceStart = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(currentStep),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      selImage = _useState6[0],
+      setImage = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(0),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      offset = _useState8[0],
+      setOffset = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      imageHover = _useState10[0],
+      setImageHover = _useState10[1];
+
+  var direction = "next";
+  var useStyles = (0, _styles.makeStyles)(function (theme) {
+    return {
+      button: {
+        backgroundColor: theme.hv.palette.atmosphere.atmo3
+      },
+      imageBox: {
+        minWidth: "100%",
+        display: "flex",
+        justifyContent: "center"
+      },
+      allImages: {
+        width: "max-content",
+        display: "flex"
+      }
+    };
+  });
+  var style = useStyles();
+
+  var _useScrollTo = (0, _uikitReactCore.useScrollTo)(0, (0, _uikitReactCore.setId)(elementId, "panel"), false, 100, documents, onChange, "row"),
+      _useScrollTo2 = (0, _slicedToArray2.default)(_useScrollTo, 2),
+      selectedIndex = _useScrollTo2[0],
+      setScrollTo = _useScrollTo2[1];
+
+  var _useScrollTo3 = (0, _uikitReactCore.useScrollTo)(0, (0, _uikitReactCore.setId)(elementId, "bigPanel"), false, 0, options, onChange, "row"),
+      _useScrollTo4 = (0, _slicedToArray2.default)(_useScrollTo3, 2),
+      selectedBigIndex = _useScrollTo4[0],
+      setBigScrollTo = _useScrollTo4[1];
+
+  var refBackwards = (0, _react.useRef)(null);
+  var refForwards = (0, _react.useRef)(null);
+  var typeCircle = "circle";
+  var handleSelection = (0, _react.useCallback)(function (event, value, index) {
+    var wrappedOnChange = function wrappedOnChange() {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
+    };
+
+    setScrollTo(event, value, index, wrappedOnChange);
+  }, [onChange, setScrollTo]);
+
+  var handleFocus = function handleFocus(focus) {
+    if (focus === refBackwards.current || focus === refForwards.current) focus.focus();
+  };
+
+  var handleBigSelection = (0, _react.useCallback)(function (event, value, index) {
+    var wrappedOnChange = function wrappedOnChange() {
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
+    };
+
+    setBigScrollTo(event, value, index, wrappedOnChange);
+  }, [onChange, setBigScrollTo]);
+  var handleVisibility = (0, _react.useCallback)(function (event, value, index) {
+    var image = document.getElementById(value);
+    var panel = document.getElementById((0, _uikitReactCore.setId)(elementId, "panel"));
+    var container = document.getElementById((0, _uikitReactCore.setId)(elementId, "container"));
+    var containerWidth = container.offsetWidth;
+    var offsetPanel = panel.offsetLeft;
+    var offsetImage = image.offsetLeft;
+    var imageWidth = image.offsetWidth;
+    var scroll = panel.scrollLeft;
+    var focus = document.activeElement;
+
+    if (offsetPanel + offsetImage + offset + imageWidth - scroll > containerWidth || offsetImage - scroll < 0) {
+      handleSelection(event, value, index);
+      handleFocus(focus);
+    }
+  }, [elementId, handleSelection, offset]);
+  (0, _react.useEffect)(function () {
+    setCurrentStep === null || setCurrentStep === void 0 ? void 0 : setCurrentStep(selImage);
+  }, [selImage, setCurrentStep]);
+  (0, _react.useEffect)(function () {
+    if (fullscreen) setOffset(150);else setOffset(0);
+
+    if (thumbnails) {
+      handleVisibility(undefined, documents[selImage].value, selImage, selectedIndex);
+    }
+
+    handleBigSelection(undefined, options[selImage].value, selImage, selectedBigIndex);
+  }, [documents, fullscreen, handleBigSelection, handleVisibility, options, selImage, selectedBigIndex, selectedIndex, thumbnails]);
+
+  var changeSlice = function changeSlice() {
+    if (direction === "next") {
+      if (infiniteCarousel && selImage === documents.length - 1) setSliceStart(0);else if (selImage > sliceStart + 2 && selImage !== documents.length - 2) setSliceStart(sliceStart + 1);
+    }
+
+    if (direction === "prev") {
+      if (infiniteCarousel && selImage === 0) setSliceStart(documents.length > 5 ? documents.length - 5 : 0);else if (selImage < sliceStart + 2 && selImage !== 1) setSliceStart(sliceStart - 1);
+    }
+  };
+
+  var nextImage = function nextImage() {
+    var next;
+    if (selImage !== documents.length - 1) next = selImage + 1;else if (infiniteCarousel) next = 0;
+    setImage(next);
+
+    if (xs) {
+      direction = "next";
+      changeSlice();
+    }
+  };
+
+  var previousImage = function previousImage() {
+    var previous;
+    if (selImage !== 0) previous = selImage - 1;else if (infiniteCarousel) previous = documents.length - 1;
+    setImage(previous);
+
+    if (xs) {
+      direction = "prev";
+      changeSlice();
+    }
+  };
+
+  var styleThumbnail = function styleThumbnail(index) {
+    if (index !== selImage) return classes.img;
+    return classes.thumbnailSelected;
+  };
+
+  var circleType = function circleType(index) {
+    if (index === selImage) {
+      typeCircle = "BigCircle";
+      if (xs) return classes.xsSelectedCircle;
+      return classes.selectedCircle;
+    }
+
+    typeCircle = "Circle";
+    return classes.miniCircle;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvContainer, _objectSpread(_objectSpread({
+    id: (0, _uikitReactCore.setId)(elementId, "container"),
+    className: (0, _clsx.default)(className, classes.root, xs ? "xs" : "nxs", fullscreen && classes.fullscreenStyle)
+  }, others), {}, {
+    children: [!xs && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.title,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: title
+      }), fullscreenProp && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: fullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+          className: classes.closeButton,
+          icon: true,
+          "aria-label": "Close",
+          onClick: function onClick() {
+            return setFullscreen(!fullscreen);
+          },
+          children: _Close || (_Close = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Close, {}))
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+          icon: true,
+          "aria-label": "Fullscreen",
+          onClick: function onClick() {
+            return setFullscreen(true);
+          },
+          children: _Fullscreen || (_Fullscreen = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Fullscreen, {}))
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvContainer, {
+      className: (0, _clsx.default)(classes.imageContainer, fullscreen ? "fullscreen" : "notFullscreen", !xs && "nxs"),
+      onFocus: function onFocus() {
+        return setImageHover(true);
+      },
+      onMouseOver: function onMouseOver() {
+        return setImageHover(true);
+      },
+      onBlur: function onBlur() {
+        return setImageHover(false);
+      },
+      onMouseOut: function onMouseOut() {
+        return setImageHover(false);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvPanel, {
+        className: (0, _clsx.default)(classes.stack, xs ? "xs" : "nxs"),
+        id: (0, _uikitReactCore.setId)(elementId, "bigPanel"),
+        children: options.map(function (element, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: style.imageBox,
+            id: element.value,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+              in: selImage === index || xs,
+              timeout: {
+                appear: 500,
+                enter: 1200,
+                exit: 200
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                className: (0, _clsx.default)(classes.selectedImage, xs ? "xs" : "nxs", fullscreen ? "fullscreen" : "notFullscreen", variant),
+                src: element.src,
+                alt: element.value
+              }, "image ".concat(element.value))
+            })
+          }, "div ".concat(element.value));
+        })
+      }), (xs || lowCardinality) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _clsx.default)(classes.lowButtons, !xs && "nxs"),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+            in: imageHover || visibleArrows,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+              ref: refBackwards,
+              className: classes.button,
+              icon: true,
+              "aria-label": "Backwards",
+              onClick: function onClick(event) {
+                return previousImage(event);
+              },
+              children: _Backwards || (_Backwards = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Backwards, {}))
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Fade, {
+            in: imageHover || visibleArrows,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+              ref: refForwards,
+              className: classes.button,
+              icon: true,
+              "aria-label": "Forwards",
+              onClick: function onClick(event) {
+                return nextImage(event);
+              },
+              children: _Forwards || (_Forwards = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Forwards, {}))
+            })
+          })
+        })]
+      }), xs && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.xsCircles,
+        children: documents.map(function (element, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: circleType(index),
+            title: typeCircle
+          }, "Circle ".concat(element.value));
+        }).slice(sliceStart, sliceStart + 5)
+      }), counter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _clsx.default)(classes.divCounter, !xs && "nxs"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: classes.counter,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvTypography, {
+            variant: "normalText",
+            style: {
+              color: "white"
+            },
+            children: "".concat(selImage + 1, "/").concat(documents.length)
+          })
+        })
+      })]
+    }), !xs && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [lowCardinality ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.circles,
+        children: documents.map(function (element, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: circleType(index),
+            title: "".concat(typeCircle, " ").concat(index)
+          }, "Circle ".concat(element.value));
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvGrid, {
+        className: (0, _clsx.default)(classes.normalButtons),
+        container: true,
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvGrid, {
+          item: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+            className: infiniteCarousel || selImage !== 0 ? "" : classes.hidden,
+            ref: refBackwards,
+            icon: true,
+            "aria-label": "Backwards",
+            onClick: function onClick(event) {
+              return previousImage(event);
+            },
+            children: _Backwards2 || (_Backwards2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Backwards, {}))
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvGrid, {
+          item: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvTypography, {
+            variant: "highlightText",
+            component: "a",
+            children: selImage + 1
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvTypography, {
+            variant: "normalText",
+            component: "a",
+            children: " /  ".concat(documents.length)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvGrid, {
+          item: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
+            className: infiniteCarousel || selImage !== documents.length - 1 ? "" : classes.hidden,
+            ref: refForwards,
+            icon: true,
+            "aria-label": "Forwards",
+            onClick: function onClick(event) {
+              return nextImage(event);
+            },
+            children: _Forwards2 || (_Forwards2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Forwards, {}))
+          })
+        })]
+      }), thumbnails && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvPanel, {
+        className: classes.panel,
+        id: (0, _uikitReactCore.setId)(elementId, "panel"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvStack, {
+          direction: "row",
+          spacing: "xs",
+          withNavigation: true,
+          children: documents.map(function (element, i) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              id: element.value,
+              className: classes.thumbnailButton,
+              onClick: function onClick() {
+                return setImage(i);
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                className: styleThumbnail(i),
+                src: element.src,
+                alt: element.value
+              }, "Thumbnail ".concat(element.value))
+            }, "Button ".concat(element.value));
+          })
+        }, "Thumbnails")
+      })]
+    })]
+  }));
+};
+
+process.env.NODE_ENV !== "production" ? HvImageCarousel.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the component SelectedImage.
+     */
+    selectedImage: _propTypes.default.string,
+
+    /**
+     * Styles applied to xs mode
+     */
+    xsMode: _propTypes.default.string,
+
+    /**
+     * Styles applied to image in xsMode
+     */
+    xsImage: _propTypes.default.string,
+
+    /**
+     * Styles applied to panel with low cardinality circles
+     */
+    circles: _propTypes.default.string,
+
+    /**
+     * Styles applied to xs mode circles
+     */
+    xsCircles: _propTypes.default.string,
+
+    /**
+     * Styles applied to unavailable button
+     */
+    hidden: _propTypes.default.string,
+
+    /**
+     * Styles applied to the carousel title
+     */
+    title: _propTypes.default.string,
+
+    /**
+     * Styles applied to the counter
+     */
+    counter: _propTypes.default.string,
+
+    /**
+     * Styles applied to the div with the counter
+     */
+    divCounter: _propTypes.default.string,
+
+    /**
+     * Styles applied to the thumbnails
+     */
+    img: _propTypes.default.string,
+
+    /**
+     * Styles applied to the selected thumbnail
+     */
+    thumbnailSelected: _propTypes.default.string,
+
+    /**
+     * Styles applied to the thumbnail button
+     */
+    thumbnailButton: _propTypes.default.string,
+
+    /**
+     * Styles applied to the low cardinality circles
+     */
+    miniCircle: _propTypes.default.string,
+
+    /**
+     * Styles applied to the circle of the selected image
+     */
+    selectedCircle: _propTypes.default.string,
+
+    /**
+     * Styles applied to the circle of the selected image in xsmode
+     */
+    xsSelectedCircle: _propTypes.default.string,
+
+    /**
+     * Styles applied to the panel with low cardinality buttons
+     */
+    lowButtons: _propTypes.default.string,
+
+    /**
+     * Styles applied to the container of the selected image
+     */
+    imageContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the panel with the thumbnails
+     */
+    stack: _propTypes.default.string,
+
+    /**
+     * Styles applied to the panel that contains the buttons and counter in default mode
+     */
+    normalButtons: _propTypes.default.string,
+
+    /**
+     * Styles applied to fullscreen mode.
+     */
+    fullscreenStyle: _propTypes.default.string,
+
+    /**
+     * Styles applied to close button in fullscreen mode.
+     */
+    closeButton: _propTypes.default.string,
+
+    /**
+     * Styles applied to change image buttons.
+     */
+    button: _propTypes.default.string,
+
+    /**
+     * Styles applied to thumbnails panel.
+     */
+    panel: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Documents to be displayed.
+   */
+  documents: _propTypes.default.array.isRequired,
+
+  /**
+   * Title of the image carousel
+   */
+  title: _propTypes.default.node,
+
+  /**
+   * A function called each time the selected image changes.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * A flag that activates the thumbnails.
+   */
+  thumbnails: _propTypes.default.bool,
+
+  /**
+   * A flag that switches to low cardinality mode
+   */
+  lowCardinality: _propTypes.default.bool,
+
+  /**
+   * A flag that activates the infinite carousel behavior
+   */
+  infiniteCarousel: _propTypes.default.bool,
+
+  /**
+   * A flag that activates a counter on the top right corner of the selected image
+   */
+  counter: _propTypes.default.bool,
+
+  /**
+   * Set Image Carousel to fullscreen mode
+   */
+  fullscreen: _propTypes.default.bool,
+
+  /**
+   * Set selected image to a particular image in documents
+   */
+  currentStep: _propTypes.default.number,
+
+  /**
+   * Function that changes the selected image
+   */
+  setCurrentStep: _propTypes.default.func,
+
+  /**
+   * Image Carousel set to xs mode
+   */
+  xs: _propTypes.default.bool,
+
+  /**
+   * Arrows always displayed in low cardinality or xs mode
+   */
+  visibleArrows: _propTypes.default.bool,
+
+  /**
+   * Selected image fit variant
+   */
+  variant: _propTypes.default.string
+} : void 0;
+
+var _default = (0, _styles.withStyles)(_styles2.default, {
+  name: "HvImageCarousel"
+})(HvImageCarousel);
+
+exports.default = _default;
+//# sourceMappingURL=ImageCarousel.js.map