@odx/websites-react 1.1.104 → 1.1.106

package/dist/components/actions/button/Button.js

@@ -93,7 +93,7 @@ LinkButton.displayName = 'LinkButton';
 const ButtonContent = ({ iconLeft, iconRight, children, }) => {
     const hasIcon = Boolean(iconLeft || iconRight);
     const isIconButton = hasIcon && !children;
-    return (_jsxs("span", { className: cn('min-h-6 max-w-full flex items-center wrap-anywhere text-left', !isIconButton && 'gap-3'), children: [iconLeft, children, iconRight] }));
+    return (_jsxs("span", { className: cn('min-h-6 max-w-full flex items-center wrap-anywhere text-left', !isIconButton && 'gap-2'), children: [iconLeft, children, iconRight] }));
 };
 export { Button, LinkButton };
 //# sourceMappingURL=Button.js.map

package/dist/components/layout/modal/Modal.js

@@ -14,7 +14,7 @@ const ModalBody = ({ children, ...props }) => {
     return (_jsx("div", { ...props, className: cn('overflow-y-auto relative bg-draeger-white', props.className), children: children }));
 };
 const modalFooterClasses = `
-  pt-6 flex justify-end items-center grow-0 gap-3 flex-col flex-wrap md:flex-row
+  pt-6 flex justify-end items-center grow-0 gap-3 flex-col-reverse flex-wrap md:flex-row
 `;
 const ModalFooter = ({ className, children, ...props }) => children && (_jsx("div", { className: cn(modalFooterClasses, className), ...props, children: children }));
 const modalClasses = `

package/dist/web/product/productStage/ProductStageContainerThumbnail.d.ts

@@ -4,11 +4,10 @@ import { VideoProps, type ImageProps } from '../../../components';
 declare const controlButtonVariants: (props?: ({
     position?: "left" | "right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface ControlButtonProps extends VariantProps<typeof controlButtonVariants> {
-    onClick: React.HTMLAttributes<HTMLDivElement>['onClick'];
+export interface ControlButtonProps extends VariantProps<typeof controlButtonVariants>, React.HTMLAttributes<HTMLDivElement> {
     icon: React.ReactNode;
 }
-export interface MediaThumbnailProps {
+export interface MediaThumbnailProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     isActive: boolean;
     isVideo?: boolean;

package/dist/web/product/productStage/ProductStageContainerThumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductStageContainerThumbnail.d.ts","sourceRoot":"","sources":["../../../../src/web/product/productStage/ProductStageContainerThumbnail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAQL,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAI7B,QAAA,MAAM,qBAAqB;;8EAU1B,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAClD,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC;IACzD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAWD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8BD,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC1C,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC1C,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG;QACxC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;KACzC,CAAC;CACH;AAED,MAAM,MAAM,gBAAgB,GACxB,CAAC;IACC,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,cAAc,CAAC,GACnB,CAAC;IACC,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,cAAc,CAAC,CAAC;AAExB,MAAM,WAAW,mCAAmC;IAClD,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CACnD,mCAAmC,CA6KpC,CAAC"}
+{"version":3,"file":"ProductStageContainerThumbnail.d.ts","sourceRoot":"","sources":["../../../../src/web/product/productStage/ProductStageContainerThumbnail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAQL,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAI7B,QAAA,MAAM,qBAAqB;;8EAU1B,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,YAAY,CAAC,OAAO,qBAAqB,CAAC,EAChD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAqBD,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAqCD,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC1C,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC1C,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG;QACxC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;KACzC,CAAC;CACH;AAED,MAAM,MAAM,gBAAgB,GACxB,CAAC;IACC,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,cAAc,CAAC,GACnB,CAAC;IACC,IAAI,EAAE,OAAO,CAAC;CACf,GAAG,cAAc,CAAC,CAAC;AAExB,MAAM,WAAW,mCAAmC;IAClD,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACnC,aAAa,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CACnD,mCAAmC,CAgJpC,CAAC"}

package/dist/web/product/productStage/ProductStageContainerThumbnail.js

@@ -4,89 +4,83 @@ import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
 import { cva } from 'class-variance-authority';
 import { Controls, ControlsItem, IconCoreChevronLeft, IconCoreChevronRight, IconCoreMediaPlay, Image, Video, } from '../../../components';
-import { cn, debounce } from '../../../utils';
+import { cn, throttle } from '../../../utils';
 import { IconPropsWrapper } from '../../../components/icon';
 const controlButtonVariants = cva('hidden select-none absolute top-0 md:flex items-center h-full cursor-pointer w-12 from-surface-secondary via-45% via-surface-secondary to-white', {
     variants: {
         position: {
-            left: 'left-0 bg-gradient-to-r',
-            right: 'right-0 bg-gradient-to-l justify-end',
+            left: 'left-0 bg-gradient-to-r ',
+            right: '-right-0 bg-gradient-to-l justify-end ',
         },
     },
 });
-const ControlButton = ({ onClick, icon, position, }) => (_jsx("div", { className: cn(controlButtonVariants({ position })), onClick: onClick, children: _jsx(IconPropsWrapper, { color: 'accent', children: icon }) }));
+const ControlButton = ({ onClick, icon, position, ...props }) => (_jsx("div", { className: cn(controlButtonVariants({ position })), onPointerDownCapture: e => {
+        // prevent drag-interaction for underlying thumbnail elements
+        e.preventDefault();
+        e.stopPropagation();
+    }, onClick: onClick, ...props, children: _jsx(IconPropsWrapper, { color: 'accent', children: icon }) }));
 const mediaThumbnailClasses = `
   group relative overflow-hidden transition-all rounded-md outline-none cursor-pointer md:size-20
   md:border-2 border-border-contrast active:border-border-primary focus:border-border-accent hover:border-border-primary
 `;
-const MediaThumbnail = ({ children, isActive, isVideo, }) => {
-    return (_jsxs("div", { tabIndex: 0, className: cn(mediaThumbnailClasses, isActive && 'border-border-primary'), children: [isVideo && (_jsx(IconCoreMediaPlay, { size: 'lg', color: 'accent', className: "absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" })), children, _jsx("div", { className: "transition-all absolute top-0 right-0 bottom-0 left-0 bg-[#000000] opacity-0 group-hover:opacity-30" })] }));
+const MediaThumbnail = ({ children, isActive, isVideo, className, ...props }) => {
+    return (_jsxs("div", { tabIndex: 0, className: cn(mediaThumbnailClasses, isActive && 'border-border-primary', className), ...props, children: [isVideo && (_jsx(IconCoreMediaPlay, { size: 'lg', color: 'accent', className: "absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" })), children, _jsx("div", { className: "transition-all absolute top-0 right-0 bottom-0 left-0 bg-[#000000] opacity-0 group-hover:opacity-30" })] }));
 };
 export const ProductStageContainerThumbnail = ({ mediaElements, onSelect }) => {
-    const handleOnSelect = (index) => {
-        if (onSelect) {
-            onSelect(index);
-        }
-    };
-    const [emblaMainRef, emblaMainApi] = useEmblaCarousel({
-        align: 'start',
-        containScroll: 'trimSnaps',
-        slidesToScroll: 1,
-    });
+    const [emblaMainRef, emblaMainApi] = useEmblaCarousel({});
     const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({
-        align: 'start',
+        align: () => 32,
         containScroll: 'trimSnaps',
-        slidesToScroll: 3,
+        dragFree: true,
     });
     const [scrollSnaps, setScrollSnaps] = React.useState([]);
-    const [activeIndex, setActiveIndex] = React.useState(0);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [canScrollNext, setCanScrollNext] = React.useState(false);
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
     const onThumbClick = React.useCallback((index) => {
+        onSelect?.(index);
         if (!emblaMainApi || !emblaThumbsApi)
             return;
         emblaMainApi.scrollTo(index);
     }, [emblaMainApi, emblaThumbsApi]);
-    const onMainSelect = React.useCallback(() => {
-        if (!emblaThumbsApi || !emblaMainApi) {
+    const onSelectHandler = React.useCallback(() => {
+        if (!emblaMainApi || !emblaThumbsApi)
             return;
-        }
+        const selectedIndex = emblaMainApi.selectedScrollSnap();
         setScrollSnaps(emblaMainApi.scrollSnapList());
-        setActiveIndex(emblaMainApi.selectedScrollSnap());
-        emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap());
-    }, [emblaThumbsApi, emblaMainApi]);
-    const onThumbSelect = React.useCallback(() => {
-        if (!emblaThumbsApi || !emblaMainApi) {
-            return;
-        }
-        setCanScrollPrev(emblaThumbsApi.canScrollPrev());
-        setCanScrollNext(emblaThumbsApi.canScrollNext());
-    }, [emblaThumbsApi, emblaMainApi]);
+        setSelectedIndex(selectedIndex);
+        emblaThumbsApi.scrollTo(selectedIndex);
+    }, [emblaMainApi, emblaThumbsApi, setSelectedIndex]);
     React.useEffect(() => {
-        if (!emblaThumbsApi || !emblaMainApi) {
+        if (!emblaMainApi || !emblaThumbsApi)
             return;
-        }
-        const reIntHandler = debounce((api) => {
-            setCanScrollPrev(api.canScrollPrev());
-            setCanScrollNext(api.canScrollNext());
-        }, 100);
-        onMainSelect();
-        onThumbSelect();
-        emblaThumbsApi.on('select', onThumbSelect);
-        emblaThumbsApi.on('reInit', reIntHandler);
-        emblaMainApi.on('select', event => {
-            handleOnSelect(event.selectedScrollSnap());
-        });
-        emblaMainApi.on('scroll', onMainSelect);
-        emblaMainApi.on('reInit', reIntHandler);
-    }, [emblaThumbsApi]);
-    const scrollPrev = React.useCallback(() => emblaThumbsApi && emblaThumbsApi.scrollPrev(), [emblaThumbsApi]);
-    const scrollNext = React.useCallback(() => emblaThumbsApi && emblaThumbsApi.scrollNext(), [emblaThumbsApi]);
-    return (_jsxs("div", { className: "flex flex-col md:gap-4", children: [_jsxs("div", { className: cn('font-text overflow-hidden relative'), ref: emblaMainRef, children: [_jsx("div", { className: "flex gap-x-2", children: mediaElements?.map((mediaElement, index) => (_jsx("div", { className: "flex-[0_0] basis-full overflow-hidden rounded-md bg-surface-secondary", children: mediaElement.type === 'image' ? (_jsx(Image, { ratio: '4/3', className: "mix-blend-darken", ...mediaElement.image })) : (_jsx(Video, { ...mediaElement.video,
+        onSelectHandler();
+        const [thumbnailScrollHandler, cancel] = throttle(() => {
+            if (!emblaThumbsApi)
+                return;
+            setCanScrollNext(emblaThumbsApi.canScrollNext());
+            setCanScrollPrev(emblaThumbsApi.canScrollPrev());
+        }, 250);
+        thumbnailScrollHandler();
+        emblaMainApi.on('select', onSelectHandler).on('reInit', onSelectHandler);
+        emblaThumbsApi
+            .on('scroll', thumbnailScrollHandler)
+            .on('reInit', thumbnailScrollHandler);
+        return () => {
+            cancel();
+            emblaMainApi
+                .off('select', onSelectHandler)
+                .off('reInit', onSelectHandler);
+            emblaThumbsApi
+                .off('scroll', thumbnailScrollHandler)
+                .off('reInit', thumbnailScrollHandler);
+        };
+    }, [emblaMainApi, onSelectHandler]);
+    return (_jsxs("div", { className: "flex flex-col md:gap-4 font-text", children: [_jsxs("div", { className: "relative overflow-hidden", ref: emblaMainRef, children: [_jsx("div", { className: "flex gap-x-2", children: mediaElements?.map((mediaElement, index) => (_jsx("div", { className: "flex-[0_0] basis-full overflow-hidden rounded-md bg-surface-secondary", children: mediaElement.type === 'image' ? (_jsx(Image, { ratio: '4/3', className: "mix-blend-darken", ...mediaElement.image })) : (_jsx(Video, { ...mediaElement.video,
                                 previewImage: {
                                     ...mediaElement.video.previewImage,
                                     ratio: '4/3',
                                     className: 'mix-blend-darken',
-                                } })) }, index))) }), scrollSnaps.length > 1 && (_jsx(Controls, { className: "md:hidden", children: scrollSnaps.map((_, index) => (_jsx(ControlsItem, { index: index, active: activeIndex === index, className: "cursor-pointer md:pointer-events-none md:cursor-default", onClick: () => onThumbClick(index) }, index))) }))] }), _jsxs("div", { className: cn('font-text relative overflow-hidden invisible h-0 md:visible md:h-auto'), ref: emblaThumbsRef, children: [_jsx("div", { className: "flex select-none gap-x-2", children: mediaElements?.map((mediaElement, index) => (_jsx("div", { className: "flex-[0_0] basis-full md:basis-auto", onClick: () => onThumbClick(index), children: _jsx(MediaThumbnail, { isActive: activeIndex === index, isVideo: mediaElement.type === 'video', children: _jsx(Image, { fit: "cover", ratio: '1/1', className: "mix-blend-darken", ...mediaElement.thumbnailImage }) }) }, index))) }), canScrollPrev && (_jsx(ControlButton, { onClick: scrollPrev, position: 'left', icon: _jsx(IconCoreChevronLeft, {}) })), canScrollNext && (_jsx(ControlButton, { onClick: scrollNext, position: 'right', icon: _jsx(IconCoreChevronRight, {}) }))] })] }));
+                                } })) }, index))) }), scrollSnaps.length > 1 && (_jsx(Controls, { className: "md:hidden", children: scrollSnaps.map((_, index) => (_jsx(ControlsItem, { index: index, active: selectedIndex === index, className: "cursor-pointer md:pointer-events-none md:cursor-default", onClick: () => onThumbClick(index) }, index))) }))] }), _jsxs("div", { className: "relative invisible h-0 overflow-hidden md:visible md:h-auto", ref: emblaThumbsRef, children: [_jsx("div", { className: "flex gap-2 select-none touch-pan-y touch-pinch-zoom", children: mediaElements?.map((mediaElement, index) => (_jsx("div", { className: "flex-[0_0] basis-full md:basis-[80px]", children: _jsx(MediaThumbnail, { isActive: selectedIndex === index, isVideo: mediaElement.type === 'video', onClick: () => onThumbClick(index), children: _jsx(Image, { fit: "cover", ratio: '1/1', className: "mix-blend-darken", ...mediaElement.thumbnailImage }) }) }, index))) }), canScrollPrev && (_jsx(ControlButton, { onClick: () => emblaThumbsApi?.scrollPrev(), position: 'left', icon: _jsx(IconCoreChevronLeft, {}) })), canScrollNext && (_jsx(ControlButton, { onClick: () => emblaThumbsApi?.scrollNext(), position: 'right', icon: _jsx(IconCoreChevronRight, {}) }))] })] }));
 };
 //# sourceMappingURL=ProductStageContainerThumbnail.js.map

package/dist/web/product/productStage/ProductStageContainerThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductStageContainerThumbnail.js","sourceRoot":"","sources":["../../../../src/web/product/productStage/ProductStageContainerThumbnail.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductStageContainerThumbnail.js","sourceRoot":"","sources":["../../../../src/web/product/productStage/ProductStageContainerThumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/web/productFinder/contentSwitch/ContentSwitch.js

@@ -24,7 +24,7 @@ const ContentSwitchTab = ({ children, active, icon, className, ...props }) => {
     return (_jsx("a", { className: cn(contentSwitchTabClasses, active
             ? 'before:bg-surface-brand before:hover:bg-interactions-brand-hover'
             : 'before:bg-surface-primary before:hover:bg-field-hover', active &&
-            'first:before:animate-draeger-switch-button-right last:before:animate-draeger-switch-button-left z-10', className), tabIndex: isSticky && isStatic ? -1 : undefined, ...props, children: _jsxs("span", { className: cn('relative flex items-center justify-center gap-3', active ? 'text-text-invert' : 'text-text-primary'), children: [icon, children] }) }));
+            'first:before:animate-draeger-switch-button-right last:before:animate-draeger-switch-button-left z-10', className), tabIndex: isSticky && isStatic ? -1 : undefined, ...props, children: _jsxs("span", { className: cn('relative flex items-center justify-center gap-2', active ? 'text-text-invert' : 'text-text-primary'), children: [icon, children] }) }));
 };
 const ContentSwitchButton = ({ iconLeft, ...props }) => {
     const { isSticky, isStatic } = React.useContext(StickyContext);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/websites-react",
   "author": "Drägerwerk AG & Co. KGaA",
-  "version": "1.1.104",
+  "version": "1.1.106",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "ODX React component library for websites",
   "type": "module",
@@ -528,8 +528,8 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
     "vitest": "^3.1.0-beta.1",
-    "@odx/eslint-config-websites": "0.0.1",
     "@odx/websites-tsconfig": "0.0.0",
+    "@odx/eslint-config-websites": "0.0.1",
     "@odx/websites-ui": "0.2.36"
   },
   "peerDependencies": {