@mmb-digital/ds-lilly 0.10.64 → 0.10.65

package/dist/ds-lilly.js

@@ -93075,7 +93075,7 @@ __webpack_require__.d(__webpack_exports__, "Dropdown2Item", function() { return
 __webpack_require__.d(__webpack_exports__, "Icon", function() { return /* reexport */ Icon; });
 __webpack_require__.d(__webpack_exports__, "IconList", function() { return /* reexport */ IconList; });
 __webpack_require__.d(__webpack_exports__, "IconListItem", function() { return /* reexport */ IconListItem; });
-__webpack_require__.d(__webpack_exports__, "Image", function() { return /* reexport */ Image; });
+__webpack_require__.d(__webpack_exports__, "Image", function() { return /* reexport */ Image_Image; });
 __webpack_require__.d(__webpack_exports__, "Link", function() { return /* reexport */ Link; });
 __webpack_require__.d(__webpack_exports__, "List", function() { return /* reexport */ List; });
 __webpack_require__.d(__webpack_exports__, "ListItem", function() { return /* reexport */ ListItem; });
@@ -99878,7 +99878,7 @@ var Alert = function (_a) {
 // CONCATENATED MODULE: ./src/components/Components/Image/Image.tsx
 
 
-var Image = function (_a) {
+var Image_Image = function (_a) {
     var alt = _a.alt, isAriaHidden = _a.isAriaHidden, isCover = _a.isCover, src = _a.src, testId = _a.testId, theme = _a.theme;
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("img", { alt: alt, "aria-hidden": isAriaHidden && 'true', className: classBinder_cx('c-image', { 'c-image--cover': isCover }, theme), "data-testid": testId, role: !alt ? 'presentation' : undefined, src: src }));
 };
@@ -99900,7 +99900,7 @@ var Avatar = function (_a) {
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: componentClassName, "data-testid": testId, style: { background: backgroundCustom, borderColor: borderColorCustom } },
         text && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { "aria-hidden": "true", className: "c-avatar__text" }, text)),
         iconName && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: iconName }),
-        imageUrl && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Image, { alt: "", src: imageUrl })));
+        imageUrl && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Image_Image, { alt: "", src: imageUrl })));
 };
 
 // CONCATENATED MODULE: ./src/components/Components/Avatar/index.ts
@@ -109051,6 +109051,26 @@ var slick_theme = __webpack_require__(1062);
 var lib = __webpack_require__(1038);
 var lib_default = /*#__PURE__*/__webpack_require__.n(lib);
 
+// EXTERNAL MODULE: ./src/components/Components/Icon/_parts_/Logo.js
+var Logo = __webpack_require__(64);
+
+// CONCATENATED MODULE: ./src/components/Components/Loader/Loader.tsx
+
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+
+var Loader = function (_a) {
+    var _b, _c;
+    var children = _a.children, isContentPulsing = _a.isContentPulsing, size = _a.size, testId = _a.testId, theme = _a.theme;
+    var isSizeSmall = size === 'small';
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader', (_b = {}, _b['c-loader--small'] = isSizeSmall, _b), theme), "data-testid": testId },
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__sonar1') }),
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__sonar2') }),
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__sonar3') }),
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__content', (_c = {}, _c['c-loader__content--pulse'] = isContentPulsing, _c)) }, children || external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Logo["default"], { className: classBinder_cx('c-loader__image') }))));
+};
+
 // CONCATENATED MODULE: ./src/components/Components/Carousel/Carousel.tsx
 var Carousel_assign = (undefined && undefined.__assign) || function () {
     Carousel_assign = Object.assign || function(t) {
@@ -109082,21 +109102,31 @@ var Carousel_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
+
 var MIN_IMG_WIDTH = 200;
 var MAX_IMG_WIDTH = 300;
+var cacheImage = function (src) {
+    return new Promise(function (resolve, reject) {
+        var img = new Image();
+        img.onload = function () { return resolve(null); };
+        img.onerror = function () { return reject(); };
+        img.src = src;
+    });
+};
 var Arrow = function (_a) {
-    var direction = _a.direction, isSwiping = _a.isSwiping, messages = _a.messages, _b = _a.show, show = _b === void 0 ? true : _b, slideWidth = _a.slideWidth, slider = _a.slider, width = _a.width;
+    var direction = _a.direction, isSwiping = _a.isSwiping, messages = _a.messages, _b = _a.show, show = _b === void 0 ? true : _b, slideWidth = _a.slideWidth, slider = _a.slider, testId = _a.testId, width = _a.width;
     var arrowPosition = width && (width - slideWidth) / 2;
     return show && slider && arrowPosition ? (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx('c-carousel__arrow', "c-carousel__arrow_" + direction, { 'c-carousel__arrow--swiping': isSwiping }), style: direction === 'left' ? { left: arrowPosition } : { right: arrowPosition } },
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isRounded: true, isSmall: true, allowEventPropagation: false, ariaLabel: messages[direction === 'left' ? 'back' : 'next'], onlyIconName: direction === 'left' ? 'arrowLeftFill' : 'arrowRightFill', type: "filled", onClick: direction === 'left' ? slider.slickPrev : slider.slickNext }))) : null;
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isRounded: true, isSmall: true, allowEventPropagation: false, ariaLabel: messages[direction === 'left' ? 'back' : 'next'], onlyIconName: direction === 'left' ? 'arrowLeftFill' : 'arrowRightFill', testId: testId + "-arrow-" + direction, type: "filled", onClick: direction === 'left' ? slider.slickPrev : slider.slickNext }))) : null;
 };
 var Carousel = function (_a) {
-    var _b = _a.hasPreview, hasPreview = _b === void 0 ? true : _b, messages = _a.messages, onChange = _a.onChange, slides = _a.slides, theme = _a.theme, props = Carousel_rest(_a, ["hasPreview", "messages", "onChange", "slides", "theme"]);
+    var _b = _a.hasPreview, hasPreview = _b === void 0 ? true : _b, messages = _a.messages, onChange = _a.onChange, slides = _a.slides, testId = _a.testId, theme = _a.theme, props = Carousel_rest(_a, ["hasPreview", "messages", "onChange", "slides", "testId", "theme"]);
     var _c = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(props.initialSlide || 0), nextSlide = _c[0], setNextSlide = _c[1];
     var _d = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(), width = _d[0], setWidth = _d[1];
     var _e = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isSwiping = _e[0], setSwiping = _e[1];
     var sliderRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])(null);
     var wrapperRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])();
+    var _f = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), imagesLoaded = _f[0], setImagesLoaded = _f[1];
     var resizeListener = function () {
         var _a;
         ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) && setWidth(wrapperRef.current.clientWidth);
@@ -109110,25 +109140,38 @@ var Carousel = function (_a) {
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
         onChange === null || onChange === void 0 ? void 0 : onChange(nextSlide);
     }, [onChange, nextSlide]);
+    Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () {
+        Promise.all(slides.map(function (_a) {
+            var src = _a.src;
+            return cacheImage(src);
+        })).then(function () { return setImagesLoaded(true); });
+    }, [slides]);
     var slideWidth = width ? Math.min(Math.max(MIN_IMG_WIDTH, width / 3), MAX_IMG_WIDTH) : MIN_IMG_WIDTH;
+    var hasNextSlide = props.infinite === false ? nextSlide < slides.length - 1 : true;
+    var hasPreviousSlide = props.infinite === false ? nextSlide > 0 : true;
     var config = Carousel_assign(Carousel_assign({ beforeChange: function (_, next) {
             setNextSlide(next);
         }, swipeEvent: function () {
-            // TODO: try enable later
             setSwiping(false);
-        }, arrows: true, centerMode: true, draggable: true, infinite: false, swipe: true, initialSlide: props.initialSlide || 0, slidesToShow: 1, variableWidth: true, useTransform: false, nextArrow: (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Arrow, { direction: "right", isSwiping: isSwiping, messages: messages, show: nextSlide < slides.length - 1, slideWidth: slideWidth, slider: sliderRef.current, width: width })), prevArrow: (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Arrow, { direction: "left", isSwiping: isSwiping, messages: messages, show: nextSlide > 0, slideWidth: slideWidth, slider: sliderRef.current, width: width })) }, props), { dots: !hasPreview });
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { ref: function (ref) { return setWidth(ref === null || ref === void 0 ? void 0 : ref.clientWidth); }, className: classBinder_cx('c-carousel', theme) },
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-carousel__wrapper') },
+        }, arrows: true, centerMode: true, draggable: true, infinite: true, swipe: true, initialSlide: props.initialSlide || 0, slidesToShow: 1, variableWidth: true, useTransform: false, nextArrow: (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Arrow, { direction: "right", isSwiping: isSwiping, messages: messages, show: hasNextSlide, slideWidth: slideWidth, slider: sliderRef.current, width: width })), prevArrow: (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Arrow, { direction: "left", isSwiping: isSwiping, messages: messages, show: hasPreviousSlide, slideWidth: slideWidth, slider: sliderRef.current, width: width })) }, props), { dots: !hasPreview });
+    if (!imagesLoaded)
+        return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-carousel__loader'), "data-testid": testId },
+            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Loader, null)));
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { ref: function (ref) { return setWidth(ref === null || ref === void 0 ? void 0 : ref.clientWidth); }, className: classBinder_cx('c-carousel', theme), "data-testid": testId },
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-carousel__wrapper', {
+                'c-carousel__wrapper--not-infinite--first': !hasPreviousSlide,
+                'c-carousel__wrapper--not-infinite--last': !hasNextSlide
+            }) },
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(lib_default.a, Carousel_assign({}, config, { ref: function (ref) { return (sliderRef.current = ref); } }), slides.map(function (_a, key) {
                 var alt = _a.alt, src = _a.src;
                 return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { key: key, className: "c-carousel__slide", style: { width: slideWidth } },
-                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Image, { alt: alt, src: src })));
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Image_Image, { alt: alt, src: src })));
             }))),
         hasPreview && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-carousel__dots') }, slides.map(function (_a, key) {
             var alt = _a.alt, src = _a.src;
-            return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("a", { "aria-pressed": nextSlide === key, className: classBinder_cx('c-carousel__dot', "c-carousel__dot--" + (nextSlide === key ? 'active' : 'disabled')), role: "button", tabIndex: 0, onClick: function () { var _a; return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(key); } },
-                nextSlide === key && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { backgroundColor: "greenNormal", name: "tick", size: "small", theme: classBinder_cx('c-carousel__dot__activeIcon') })),
-                external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Image, { alt: alt, src: src })));
+            return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("a", { "aria-pressed": nextSlide === key, className: classBinder_cx('c-carousel__dot', "c-carousel__dot--" + (nextSlide === key ? 'active' : 'disabled')), "data-testid": testId + "-preview-" + key, role: "button", tabIndex: 0, onClick: function () { var _a; return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(key); } },
+                external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Image_Image, { alt: alt, src: src }),
+                nextSlide === key && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { backgroundColor: "greenNormal", name: "tick", size: "small", theme: classBinder_cx('c-carousel__dot__activeIcon') }))));
         })))));
 };
 
@@ -110248,26 +110291,6 @@ var ListItem = function (_a) {
 
 
 
-// EXTERNAL MODULE: ./src/components/Components/Icon/_parts_/Logo.js
-var Logo = __webpack_require__(64);
-
-// CONCATENATED MODULE: ./src/components/Components/Loader/Loader.tsx
-
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-
-var Loader = function (_a) {
-    var _b, _c;
-    var children = _a.children, isContentPulsing = _a.isContentPulsing, size = _a.size, testId = _a.testId, theme = _a.theme;
-    var isSizeSmall = size === 'small';
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader', (_b = {}, _b['c-loader--small'] = isSizeSmall, _b), theme), "data-testid": testId },
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__sonar1') }),
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__sonar2') }),
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__sonar3') }),
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-loader__content', (_c = {}, _c['c-loader__content--pulse'] = isContentPulsing, _c)) }, children || external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Logo["default"], { className: classBinder_cx('c-loader__image') }))));
-};
-
 // CONCATENATED MODULE: ./src/components/Components/Loader/index.ts
 
 

package/dist/types/src/components/Components/Carousel/Carousel.d.ts

@@ -6,15 +6,17 @@ declare type Messages = {
     next: string;
     back: string;
 };
+declare type Slide = {
+    src: string;
+    alt: string;
+};
+declare type Slides = Array<Slide>;
 interface Props extends ComponentPropsType, Partial<Settings> {
-    slides: Array<{
-        src: string;
-        alt: string;
-    }>;
+    slides: Slides;
     onChange?: (index: number) => void;
     hasPreview?: boolean;
     messages: Messages;
 }
-export declare const Carousel: ({ hasPreview, messages, onChange, slides, theme, ...props }: Props) => JSX.Element;
+export declare const Carousel: ({ hasPreview, messages, onChange, slides, testId, theme, ...props }: Props) => JSX.Element;
 export {};
 //# sourceMappingURL=Carousel.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/ds-lilly",
-  "version": "0.10.64",
+  "version": "0.10.65",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,