@hitachivantara/uikit-react-lab 3.53.0 → 3.54.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/ImageCarousel/ImageCarousel.d.ts +11 -0
  2. package/dist/ImageCarousel/ImageCarousel.js +615 -0
  3. package/dist/ImageCarousel/ImageCarousel.js.map +1 -0
  4. package/dist/ImageCarousel/index.d.ts +2 -0
  5. package/dist/ImageCarousel/index.js +16 -0
  6. package/dist/ImageCarousel/index.js.map +1 -0
  7. package/dist/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
  8. package/dist/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
  9. package/dist/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
  10. package/dist/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
  11. package/dist/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
  12. package/dist/ImageCarousel/stories/resources/ObiWan.png +0 -0
  13. package/dist/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
  14. package/dist/ImageCarousel/stories/resources/Revan.jpg +0 -0
  15. package/dist/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
  16. package/dist/ImageCarousel/stories/resources/Yoda.jpg +0 -0
  17. package/dist/ImageCarousel/styles.js +238 -0
  18. package/dist/ImageCarousel/styles.js.map +1 -0
  19. package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +3 -0
  20. package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
  21. package/dist/StepNavigation/SimpleNavigation/Dot/styles.js +0 -3
  22. package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
  23. package/dist/index.d.ts +3 -0
  24. package/dist/index.js +10 -1
  25. package/dist/index.js.map +1 -1
  26. package/dist/legacy/ImageCarousel/ImageCarousel.d.ts +11 -0
  27. package/dist/legacy/ImageCarousel/ImageCarousel.js +574 -0
  28. package/dist/legacy/ImageCarousel/ImageCarousel.js.map +1 -0
  29. package/dist/legacy/ImageCarousel/index.d.ts +2 -0
  30. package/dist/legacy/ImageCarousel/index.js +2 -0
  31. package/dist/legacy/ImageCarousel/index.js.map +1 -0
  32. package/dist/legacy/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
  33. package/dist/legacy/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
  34. package/dist/legacy/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
  35. package/dist/legacy/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
  36. package/dist/legacy/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
  37. package/dist/legacy/ImageCarousel/stories/resources/ObiWan.png +0 -0
  38. package/dist/legacy/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
  39. package/dist/legacy/ImageCarousel/stories/resources/Revan.jpg +0 -0
  40. package/dist/legacy/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
  41. package/dist/legacy/ImageCarousel/stories/resources/Yoda.jpg +0 -0
  42. package/dist/legacy/ImageCarousel/styles.js +228 -0
  43. package/dist/legacy/ImageCarousel/styles.js.map +1 -0
  44. package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +3 -0
  45. package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
  46. package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js +0 -3
  47. package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
  48. package/dist/legacy/index.d.ts +3 -0
  49. package/dist/legacy/index.js +1 -0
  50. package/dist/legacy/index.js.map +1 -1
  51. package/dist/modern/ImageCarousel/ImageCarousel.d.ts +11 -0
  52. package/dist/modern/ImageCarousel/ImageCarousel.js +499 -0
  53. package/dist/modern/ImageCarousel/ImageCarousel.js.map +1 -0
  54. package/dist/modern/ImageCarousel/index.d.ts +2 -0
  55. package/dist/modern/ImageCarousel/index.js +2 -0
  56. package/dist/modern/ImageCarousel/index.js.map +1 -0
  57. package/dist/modern/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
  58. package/dist/modern/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
  59. package/dist/modern/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
  60. package/dist/modern/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
  61. package/dist/modern/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
  62. package/dist/modern/ImageCarousel/stories/resources/ObiWan.png +0 -0
  63. package/dist/modern/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
  64. package/dist/modern/ImageCarousel/stories/resources/Revan.jpg +0 -0
  65. package/dist/modern/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
  66. package/dist/modern/ImageCarousel/stories/resources/Yoda.jpg +0 -0
  67. package/dist/modern/ImageCarousel/styles.js +241 -0
  68. package/dist/modern/ImageCarousel/styles.js.map +1 -0
  69. package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +3 -0
  70. package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -1
  71. package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js +0 -3
  72. package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -1
  73. package/dist/modern/index.d.ts +3 -0
  74. package/dist/modern/index.js +1 -0
  75. package/dist/modern/index.js.map +1 -1
  76. package/package.json +3 -3
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ import { StandardProps } from "@material-ui/core";
3
+
4
+ export type HvImageCarouselClassKey = "root";
5
+
6
+ export type HvImageCarouselProps = StandardProps<
7
+ React.HTMLAttributes<HTMLDivElement>,
8
+ HvImageCarouselClassKey
9
+ >;
10
+
11
+ export default function HvImageCarousel(props: HvImageCarouselProps): JSX.Element | null;
@@ -0,0 +1,615 @@
1
+ "use strict";
2
+
3
+ require("core-js/modules/es.array.iterator.js");
4
+
5
+ require("core-js/modules/es.object.to-string.js");
6
+
7
+ require("core-js/modules/es.string.iterator.js");
8
+
9
+ require("core-js/modules/es.weak-map.js");
10
+
11
+ require("core-js/modules/web.dom-collections.iterator.js");
12
+
13
+ require("core-js/modules/es.object.get-own-property-descriptor.js");
14
+
15
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
16
+
17
+ var _typeof = require("@babel/runtime/helpers/typeof");
18
+
19
+ Object.defineProperty(exports, "__esModule", {
20
+ value: true
21
+ });
22
+ exports.default = void 0;
23
+
24
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
25
+
26
+ require("core-js/modules/es.array.map.js");
27
+
28
+ require("core-js/modules/es.array.slice.js");
29
+
30
+ require("core-js/modules/es.array.concat.js");
31
+
32
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
33
+
34
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
35
+
36
+ var _react = _interopRequireWildcard(require("react"));
37
+
38
+ var _propTypes = _interopRequireDefault(require("prop-types"));
39
+
40
+ var _clsx = _interopRequireDefault(require("clsx"));
41
+
42
+ var _uikitReactCore = require("@hitachivantara/uikit-react-core");
43
+
44
+ var _core = require("@material-ui/core");
45
+
46
+ var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
47
+
48
+ var _styles = _interopRequireDefault(require("./styles"));
49
+
50
+ var _Close, _Fullscreen, _Backwards, _Forwards, _Backwards2, _Forwards2;
51
+
52
+ var _excluded = ["className", "classes", "documents", "title", "id", "fullscreen", "thumbnails", "lowCardinality", "infiniteCarousel", "xs", "onChange", "counter", "currentStep", "setCurrentStep", "visibleArrows", "variant"];
53
+
54
+ 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); }
55
+
56
+ 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; }
57
+
58
+ /**
59
+ * ImageCarousel description/documentation paragraph
60
+ */
61
+ var HvImageCarousel = function HvImageCarousel(props) {
62
+ var className = props.className,
63
+ classes = props.classes,
64
+ documents = props.documents,
65
+ title = props.title,
66
+ id = props.id,
67
+ _props$fullscreen = props.fullscreen,
68
+ fullscreenProp = _props$fullscreen === void 0 ? false : _props$fullscreen,
69
+ _props$thumbnails = props.thumbnails,
70
+ thumbnails = _props$thumbnails === void 0 ? false : _props$thumbnails,
71
+ _props$lowCardinality = props.lowCardinality,
72
+ lowCardinality = _props$lowCardinality === void 0 ? false : _props$lowCardinality,
73
+ _props$infiniteCarous = props.infiniteCarousel,
74
+ infiniteCarousel = _props$infiniteCarous === void 0 ? false : _props$infiniteCarous,
75
+ _props$xs = props.xs,
76
+ xs = _props$xs === void 0 ? false : _props$xs,
77
+ onChange = props.onChange,
78
+ _props$counter = props.counter,
79
+ counter = _props$counter === void 0 ? false : _props$counter,
80
+ _props$currentStep = props.currentStep,
81
+ currentStep = _props$currentStep === void 0 ? 0 : _props$currentStep,
82
+ setCurrentStep = props.setCurrentStep,
83
+ _props$visibleArrows = props.visibleArrows,
84
+ visibleArrows = _props$visibleArrows === void 0 ? false : _props$visibleArrows,
85
+ _props$variant = props.variant,
86
+ variant = _props$variant === void 0 ? "contain" : _props$variant,
87
+ others = (0, _objectWithoutProperties2.default)(props, _excluded);
88
+ var elementId = (0, _uikitReactCore.useUniqueId)(id, "hvcarousel");
89
+
90
+ var _useState = (0, _react.useState)(false),
91
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
92
+ fullscreen = _useState2[0],
93
+ setFullscreen = _useState2[1];
94
+
95
+ var options = documents.map(function (element) {
96
+ return {
97
+ src: element.src,
98
+ value: (0, _uikitReactCore.setId)(elementId, element.value)
99
+ };
100
+ });
101
+
102
+ var _useState3 = (0, _react.useState)(0),
103
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
104
+ sliceStart = _useState4[0],
105
+ setSliceStart = _useState4[1];
106
+
107
+ var _useState5 = (0, _react.useState)(currentStep),
108
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
109
+ selImage = _useState6[0],
110
+ setImage = _useState6[1];
111
+
112
+ var _useState7 = (0, _react.useState)(0),
113
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
114
+ offset = _useState8[0],
115
+ setOffset = _useState8[1];
116
+
117
+ var _useState9 = (0, _react.useState)(false),
118
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
119
+ imageHover = _useState10[0],
120
+ setImageHover = _useState10[1];
121
+
122
+ var direction = "next";
123
+ var useStyles = (0, _core.makeStyles)(function (theme) {
124
+ return {
125
+ button: {
126
+ backgroundColor: theme.hv.palette.atmosphere.atmo3
127
+ },
128
+ imageBox: {
129
+ minWidth: "100%",
130
+ display: "flex",
131
+ justifyContent: "center"
132
+ },
133
+ allImages: {
134
+ width: "max-content",
135
+ display: "flex"
136
+ }
137
+ };
138
+ });
139
+ var style = useStyles();
140
+
141
+ var _useScrollTo = (0, _uikitReactCore.useScrollTo)(0, (0, _uikitReactCore.setId)(elementId, "panel"), false, 100, documents, onChange, "row"),
142
+ _useScrollTo2 = (0, _slicedToArray2.default)(_useScrollTo, 2),
143
+ selectedIndex = _useScrollTo2[0],
144
+ setScrollTo = _useScrollTo2[1];
145
+
146
+ var _useScrollTo3 = (0, _uikitReactCore.useScrollTo)(0, (0, _uikitReactCore.setId)(elementId, "bigPanel"), false, 0, options, onChange, "row"),
147
+ _useScrollTo4 = (0, _slicedToArray2.default)(_useScrollTo3, 2),
148
+ selectedBigIndex = _useScrollTo4[0],
149
+ setBigScrollTo = _useScrollTo4[1];
150
+
151
+ var refBackwards = (0, _react.useRef)(null);
152
+ var refForwards = (0, _react.useRef)(null);
153
+ var typeCircle = "circle";
154
+ var handleSelection = (0, _react.useCallback)(function (event, value, index) {
155
+ var wrappedOnChange = function wrappedOnChange() {
156
+ onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
157
+ };
158
+
159
+ setScrollTo(event, value, index, wrappedOnChange);
160
+ }, [onChange, setScrollTo]);
161
+
162
+ var handleFocus = function handleFocus(focus) {
163
+ if (focus === refBackwards.current || focus === refForwards.current) focus.focus();
164
+ };
165
+
166
+ var handleBigSelection = (0, _react.useCallback)(function (event, value, index) {
167
+ var wrappedOnChange = function wrappedOnChange() {
168
+ onChange === null || onChange === void 0 ? void 0 : onChange(event, index);
169
+ };
170
+
171
+ setBigScrollTo(event, value, index, wrappedOnChange);
172
+ }, [onChange, setBigScrollTo]);
173
+ var handleVisibility = (0, _react.useCallback)(function (event, value, index) {
174
+ var image = document.getElementById(value);
175
+ var panel = document.getElementById((0, _uikitReactCore.setId)(elementId, "panel"));
176
+ var container = document.getElementById((0, _uikitReactCore.setId)(elementId, "container"));
177
+ var containerWidth = container.offsetWidth;
178
+ var offsetPanel = panel.offsetLeft;
179
+ var offsetImage = image.offsetLeft;
180
+ var imageWidth = image.offsetWidth;
181
+ var scroll = panel.scrollLeft;
182
+ var focus = document.activeElement;
183
+
184
+ if (offsetPanel + offsetImage + offset + imageWidth - scroll > containerWidth || offsetImage - scroll < 0) {
185
+ handleSelection(event, value, index);
186
+ handleFocus(focus);
187
+ }
188
+ }, [elementId, handleSelection, offset]);
189
+ (0, _react.useEffect)(function () {
190
+ setCurrentStep === null || setCurrentStep === void 0 ? void 0 : setCurrentStep(selImage);
191
+ }, [selImage, setCurrentStep]);
192
+ (0, _react.useEffect)(function () {
193
+ if (fullscreen) setOffset(150);else setOffset(0);
194
+
195
+ if (thumbnails) {
196
+ handleVisibility(undefined, documents[selImage].value, selImage, selectedIndex);
197
+ }
198
+
199
+ handleBigSelection(undefined, options[selImage].value, selImage, selectedBigIndex);
200
+ }, [documents, fullscreen, handleBigSelection, handleVisibility, options, selImage, selectedBigIndex, selectedIndex, thumbnails]);
201
+
202
+ var changeSlice = function changeSlice() {
203
+ if (direction === "next") {
204
+ if (infiniteCarousel && selImage === documents.length - 1) setSliceStart(0);else if (selImage > sliceStart + 2 && selImage !== documents.length - 2) setSliceStart(sliceStart + 1);
205
+ }
206
+
207
+ if (direction === "prev") {
208
+ if (infiniteCarousel && selImage === 0) setSliceStart(documents.length > 5 ? documents.length - 5 : 0);else if (selImage < sliceStart + 2 && selImage !== 1) setSliceStart(sliceStart - 1);
209
+ }
210
+ };
211
+
212
+ var nextImage = function nextImage() {
213
+ var next;
214
+ if (selImage !== documents.length - 1) next = selImage + 1;else if (infiniteCarousel) next = 0;
215
+ setImage(next);
216
+
217
+ if (xs) {
218
+ direction = "next";
219
+ changeSlice();
220
+ }
221
+ };
222
+
223
+ var previousImage = function previousImage() {
224
+ var previous;
225
+ if (selImage !== 0) previous = selImage - 1;else if (infiniteCarousel) previous = documents.length - 1;
226
+ setImage(previous);
227
+
228
+ if (xs) {
229
+ direction = "prev";
230
+ changeSlice();
231
+ }
232
+ };
233
+
234
+ var styleThumbnail = function styleThumbnail(index) {
235
+ if (index !== selImage) return classes.img;
236
+ return classes.thumbnailSelected;
237
+ };
238
+
239
+ var circleType = function circleType(index) {
240
+ if (index === selImage) {
241
+ typeCircle = "BigCircle";
242
+ if (xs) return classes.xsSelectedCircle;
243
+ return classes.selectedCircle;
244
+ }
245
+
246
+ typeCircle = "Circle";
247
+ return classes.miniCircle;
248
+ };
249
+
250
+ return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvContainer, (0, _extends2.default)({
251
+ id: (0, _uikitReactCore.setId)(elementId, "container"),
252
+ className: (0, _clsx.default)(className, classes.root, xs ? "xs" : "nxs", fullscreen && classes.fullscreenStyle)
253
+ }, others), !xs && /*#__PURE__*/_react.default.createElement("div", {
254
+ className: classes.title
255
+ }, /*#__PURE__*/_react.default.createElement("div", null, title), fullscreenProp && /*#__PURE__*/_react.default.createElement("div", null, fullscreen ? /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
256
+ className: classes.closeButton,
257
+ icon: true,
258
+ "aria-label": "Close",
259
+ onClick: function onClick() {
260
+ return setFullscreen(!fullscreen);
261
+ }
262
+ }, _Close || (_Close = /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Close, null))) : /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
263
+ icon: true,
264
+ "aria-label": "Fullscreen",
265
+ onClick: function onClick() {
266
+ return setFullscreen(true);
267
+ }
268
+ }, _Fullscreen || (_Fullscreen = /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Fullscreen, null))))), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvContainer, {
269
+ className: (0, _clsx.default)(classes.imageContainer, fullscreen ? "fullscreen" : "notFullscreen", !xs && "nxs"),
270
+ onFocus: function onFocus() {
271
+ return setImageHover(true);
272
+ },
273
+ onMouseOver: function onMouseOver() {
274
+ return setImageHover(true);
275
+ },
276
+ onBlur: function onBlur() {
277
+ return setImageHover(false);
278
+ },
279
+ onMouseOut: function onMouseOut() {
280
+ return setImageHover(false);
281
+ }
282
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvPanel, {
283
+ className: (0, _clsx.default)(classes.stack, xs ? "xs" : "nxs"),
284
+ id: (0, _uikitReactCore.setId)(elementId, "bigPanel")
285
+ }, options.map(function (element, index) {
286
+ return /*#__PURE__*/_react.default.createElement("div", {
287
+ className: style.imageBox,
288
+ id: element.value,
289
+ key: "div ".concat(element.value)
290
+ }, /*#__PURE__*/_react.default.createElement(_core.Fade, {
291
+ in: selImage === index || xs,
292
+ timeout: {
293
+ appear: 500,
294
+ enter: 1200,
295
+ exit: 200
296
+ }
297
+ }, /*#__PURE__*/_react.default.createElement("img", {
298
+ className: (0, _clsx.default)(classes.selectedImage, xs ? "xs" : "nxs", fullscreen ? "fullscreen" : "notFullscreen", variant),
299
+ src: element.src,
300
+ alt: element.value,
301
+ key: "image ".concat(element.value)
302
+ })));
303
+ })), (xs || lowCardinality) && /*#__PURE__*/_react.default.createElement("div", {
304
+ className: (0, _clsx.default)(classes.lowButtons, !xs && "nxs")
305
+ }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Fade, {
306
+ in: imageHover || visibleArrows
307
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
308
+ ref: refBackwards,
309
+ className: classes.button,
310
+ icon: true,
311
+ "aria-label": "Backwards",
312
+ onClick: function onClick(event) {
313
+ return previousImage(event);
314
+ }
315
+ }, _Backwards || (_Backwards = /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Backwards, null))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_core.Fade, {
316
+ in: imageHover || visibleArrows
317
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
318
+ ref: refForwards,
319
+ className: classes.button,
320
+ icon: true,
321
+ "aria-label": "Forwards",
322
+ onClick: function onClick(event) {
323
+ return nextImage(event);
324
+ }
325
+ }, _Forwards || (_Forwards = /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Forwards, null)))))), xs && /*#__PURE__*/_react.default.createElement("div", {
326
+ className: classes.xsCircles
327
+ }, documents.map(function (element, index) {
328
+ return /*#__PURE__*/_react.default.createElement("span", {
329
+ className: circleType(index),
330
+ title: typeCircle,
331
+ key: "Circle ".concat(element.value)
332
+ });
333
+ }).slice(sliceStart, sliceStart + 5)), counter && /*#__PURE__*/_react.default.createElement("div", {
334
+ className: (0, _clsx.default)(classes.divCounter, !xs && "nxs")
335
+ }, /*#__PURE__*/_react.default.createElement("span", {
336
+ className: classes.counter
337
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
338
+ variant: "normalText",
339
+ style: {
340
+ color: "white"
341
+ }
342
+ }, "".concat(selImage + 1, "/").concat(documents.length))))), !xs && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, lowCardinality ? /*#__PURE__*/_react.default.createElement("div", {
343
+ className: classes.circles
344
+ }, documents.map(function (element, index) {
345
+ return /*#__PURE__*/_react.default.createElement("span", {
346
+ className: circleType(index),
347
+ title: "".concat(typeCircle, " ").concat(index),
348
+ key: "Circle ".concat(element.value)
349
+ });
350
+ })) : /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvGrid, {
351
+ className: (0, _clsx.default)(classes.normalButtons),
352
+ container: true,
353
+ justifyContent: "space-between",
354
+ alignItems: "center"
355
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvGrid, {
356
+ item: true
357
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
358
+ className: infiniteCarousel || selImage !== 0 ? "" : classes.hidden,
359
+ ref: refBackwards,
360
+ icon: true,
361
+ "aria-label": "Backwards",
362
+ onClick: function onClick(event) {
363
+ return previousImage(event);
364
+ }
365
+ }, _Backwards2 || (_Backwards2 = /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Backwards, null)))), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvGrid, {
366
+ item: true
367
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
368
+ variant: "highlightText",
369
+ component: "a"
370
+ }, selImage + 1), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
371
+ variant: "normalText",
372
+ component: "a"
373
+ }, " / ".concat(documents.length))), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvGrid, {
374
+ item: true
375
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvButton, {
376
+ className: infiniteCarousel || selImage !== documents.length - 1 ? "" : classes.hidden,
377
+ ref: refForwards,
378
+ icon: true,
379
+ "aria-label": "Forwards",
380
+ onClick: function onClick(event) {
381
+ return nextImage(event);
382
+ }
383
+ }, _Forwards2 || (_Forwards2 = /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Forwards, null))))), thumbnails && /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvPanel, {
384
+ className: classes.panel,
385
+ id: (0, _uikitReactCore.setId)(elementId, "panel")
386
+ }, /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvStack, {
387
+ key: "Thumbnails",
388
+ direction: "row",
389
+ spacing: "xs",
390
+ withNavigation: true
391
+ }, documents.map(function (element, i) {
392
+ return /*#__PURE__*/_react.default.createElement(_core.Button, {
393
+ id: element.value,
394
+ key: "Button ".concat(element.value),
395
+ className: classes.thumbnailButton,
396
+ onClick: function onClick() {
397
+ return setImage(i);
398
+ }
399
+ }, /*#__PURE__*/_react.default.createElement("img", {
400
+ className: styleThumbnail(i),
401
+ src: element.src,
402
+ alt: element.value,
403
+ key: "Thumbnail ".concat(element.value)
404
+ }));
405
+ })))));
406
+ };
407
+
408
+ process.env.NODE_ENV !== "production" ? HvImageCarousel.propTypes = {
409
+ /**
410
+ * Class names to be applied.
411
+ */
412
+ className: _propTypes.default.string,
413
+
414
+ /**
415
+ * A Jss Object used to override or extend the styles applied.
416
+ */
417
+ classes: _propTypes.default.shape({
418
+ /**
419
+ * Styles applied to the component root class.
420
+ */
421
+ root: _propTypes.default.string,
422
+
423
+ /**
424
+ * Styles applied to the component SelectedImage.
425
+ */
426
+ selectedImage: _propTypes.default.string,
427
+
428
+ /**
429
+ * Styles applied to xs mode
430
+ */
431
+ xsMode: _propTypes.default.string,
432
+
433
+ /**
434
+ * Styles applied to image in xsMode
435
+ */
436
+ xsImage: _propTypes.default.string,
437
+
438
+ /**
439
+ * Styles applied to panel with low cardinality circles
440
+ */
441
+ circles: _propTypes.default.string,
442
+
443
+ /**
444
+ * Styles applied to xs mode circles
445
+ */
446
+ xsCircles: _propTypes.default.string,
447
+
448
+ /**
449
+ * Styles applied to unavailable button
450
+ */
451
+ hidden: _propTypes.default.string,
452
+
453
+ /**
454
+ * Styles applied to the carousel title
455
+ */
456
+ title: _propTypes.default.string,
457
+
458
+ /**
459
+ * Styles applied to the counter
460
+ */
461
+ counter: _propTypes.default.string,
462
+
463
+ /**
464
+ * Styles applied to the div with the counter
465
+ */
466
+ divCounter: _propTypes.default.string,
467
+
468
+ /**
469
+ * Styles applied to the thumbnails
470
+ */
471
+ img: _propTypes.default.string,
472
+
473
+ /**
474
+ * Styles applied to the selected thumbnail
475
+ */
476
+ thumbnailSelected: _propTypes.default.string,
477
+
478
+ /**
479
+ * Styles applied to the thumbnail button
480
+ */
481
+ thumbnailButton: _propTypes.default.string,
482
+
483
+ /**
484
+ * Styles applied to the low cardinality circles
485
+ */
486
+ miniCircle: _propTypes.default.string,
487
+
488
+ /**
489
+ * Styles applied to the circle of the selected image
490
+ */
491
+ selectedCircle: _propTypes.default.string,
492
+
493
+ /**
494
+ * Styles applied to the circle of the selected image in xsmode
495
+ */
496
+ xsSelectedCircle: _propTypes.default.string,
497
+
498
+ /**
499
+ * Styles applied to the panel with low cardinality buttons
500
+ */
501
+ lowButtons: _propTypes.default.string,
502
+
503
+ /**
504
+ * Styles applied to the container of the selected image
505
+ */
506
+ imageContainer: _propTypes.default.string,
507
+
508
+ /**
509
+ * Styles applied to the panel with the thumbnails
510
+ */
511
+ stack: _propTypes.default.string,
512
+
513
+ /**
514
+ * Styles applied to the panel that contains the buttons and counter in default mode
515
+ */
516
+ normalButtons: _propTypes.default.string,
517
+
518
+ /**
519
+ * Styles applied to fullscreen mode.
520
+ */
521
+ fullscreenStyle: _propTypes.default.string,
522
+
523
+ /**
524
+ * Styles applied to close button in fullscreen mode.
525
+ */
526
+ closeButton: _propTypes.default.string,
527
+
528
+ /**
529
+ * Styles applied to change image buttons.
530
+ */
531
+ button: _propTypes.default.string,
532
+
533
+ /**
534
+ * Styles applied to thumbnails panel.
535
+ */
536
+ panel: _propTypes.default.string
537
+ }).isRequired,
538
+
539
+ /**
540
+ * Documents to be displayed.
541
+ */
542
+ documents: _propTypes.default.array.isRequired,
543
+
544
+ /**
545
+ * Title of the image carousel
546
+ */
547
+ title: _propTypes.default.node,
548
+
549
+ /**
550
+ * A function called each time the selected image changes.
551
+ */
552
+ onChange: _propTypes.default.func,
553
+
554
+ /**
555
+ * Id to be applied to the root node.
556
+ */
557
+ id: _propTypes.default.string,
558
+
559
+ /**
560
+ * A flag that activates the thumbnails.
561
+ */
562
+ thumbnails: _propTypes.default.bool,
563
+
564
+ /**
565
+ * A flag that switches to low cardinality mode
566
+ */
567
+ lowCardinality: _propTypes.default.bool,
568
+
569
+ /**
570
+ * A flag that activates the infinite carousel behavior
571
+ */
572
+ infiniteCarousel: _propTypes.default.bool,
573
+
574
+ /**
575
+ * A flag that activates a counter on the top right corner of the selected image
576
+ */
577
+ counter: _propTypes.default.bool,
578
+
579
+ /**
580
+ * Set Image Carousel to fullscreen mode
581
+ */
582
+ fullscreen: _propTypes.default.bool,
583
+
584
+ /**
585
+ * Set selected image to a particular image in documents
586
+ */
587
+ currentStep: _propTypes.default.number,
588
+
589
+ /**
590
+ * Function that changes the selected image
591
+ */
592
+ setCurrentStep: _propTypes.default.func,
593
+
594
+ /**
595
+ * Image Carousel set to xs mode
596
+ */
597
+ xs: _propTypes.default.bool,
598
+
599
+ /**
600
+ * Arrows always displayed in low cardinality or xs mode
601
+ */
602
+ visibleArrows: _propTypes.default.bool,
603
+
604
+ /**
605
+ * Selected image fit variant
606
+ */
607
+ variant: _propTypes.default.string
608
+ } : void 0;
609
+
610
+ var _default = (0, _core.withStyles)(_styles.default, {
611
+ name: "HvImageCarousel"
612
+ })(HvImageCarousel);
613
+
614
+ exports.default = _default;
615
+ //# sourceMappingURL=ImageCarousel.js.map