@festo-ui/react 9.0.0-dev.718 → 9.0.0-dev.720

package/dist/components/modals/image-gallery/ImageGallery.d.ts

@@ -0,0 +1,18 @@
+import './ImageGallery.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+import { type ModalBaseProps } from '../ModalBase';
+import { type ImageGalleryItemData, type ImageGalleryItemDataBase } from './internal/BaseGallery';
+export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBaseProps {
+    /** Index number of initial slide. */
+    startIndex: number;
+    images?: ImageGalleryItemData[];
+    thumbnailImages?: ImageGalleryItemDataBase[];
+    /** Whether to show pagination controls. Can also accept a number in case images are passed as children */
+    pagination?: boolean | number;
+    showScaleButton?: boolean;
+    /** Whether to show descriptive content). Can also be used as a render prop called with the index of the current image */
+    descriptiveContent?: boolean | ((index: number) => React.ReactNode);
+    onSlideChanged?: (index: number) => void;
+    onScaleChange?: (value: boolean) => void;
+}
+export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;

package/dist/components/modals/image-gallery/ImageGallery.helper.d.ts

@@ -0,0 +1,2 @@
+import { type Argument } from 'classnames';
+export declare const getClasses: (thumbnailImages: Argument, descriptiveContent: Argument, className: Argument) => string;

package/dist/components/modals/image-gallery/ImageGallery.helper.js

@@ -0,0 +1,13 @@
+import classnames from "classnames";
+const getClasses = (thumbnailImages, descriptiveContent, className)=>{
+    const base = 'fwe-modal-image-gallery';
+    const thumbnail = `${base}--with-thumbnails`;
+    const container = `${base}--with-container`;
+    return classnames(base, {
+        [thumbnail]: [
+            thumbnailImages
+        ],
+        [container]: descriptiveContent
+    }, className);
+};
+export { getClasses };

package/dist/components/modals/image-gallery/ImageGallery.js

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./ImageGallery.css";
+import { forwardRef, useState } from "react";
+import { ModalBase } from "../ModalBase.js";
+import { getClasses } from "./ImageGallery.helper.js";
+import { ImageGalleryContent } from "./ImageGalleryContent.js";
+import { BaseGallery } from "./internal/BaseGallery.js";
+import { CloseButton } from "./internal/CloseButton.js";
+import { ImageGalleryContainer } from "./internal/ImageGalleryContainer.js";
+import { ImageGalleryPagination } from "./internal/ImageGalleryPagination.js";
+import { ScaleButton } from "./internal/ScaleButton.js";
+function getLength(pagination, images) {
+    let length = 0;
+    if ('number' == typeof pagination) length = pagination;
+    else if (true === pagination && images?.length) length = images.length;
+    return length;
+}
+const ImageGallery = /*#__PURE__*/ forwardRef(({ isOpen, startIndex, images, thumbnailImages, descriptiveContent, children, className, pagination, showScaleButton, onClose, onSlideChanged, onScaleChange, ...props }, ref)=>{
+    const [currentIndex, setCurrentIndex] = useState(startIndex + 1);
+    function handleChange(index) {
+        setCurrentIndex(index + 1);
+        onSlideChanged?.(index);
+    }
+    function handleClose() {
+        setCurrentIndex(startIndex + 1);
+        onClose?.();
+    }
+    const hasDescriptiveContent = Boolean(descriptiveContent);
+    const classes = getClasses(thumbnailImages, hasDescriptiveContent, className);
+    const length = getLength(pagination, images);
+    return /*#__PURE__*/ jsx(ModalBase, {
+        onClose: handleClose,
+        className: classes,
+        ...props,
+        isOpen: isOpen,
+        ref: ref,
+        children: isOpen && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: "fwe-image-gallery-header",
+                    children: [
+                        /*#__PURE__*/ jsx(ImageGalleryPagination, {
+                            currentIndex: currentIndex,
+                            length: length
+                        }),
+                        showScaleButton ? /*#__PURE__*/ jsx(ScaleButton, {
+                            onScaleChange: onScaleChange
+                        }) : null,
+                        /*#__PURE__*/ jsx(CloseButton, {
+                            showScaleButton: showScaleButton,
+                            onClose: onClose
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(ImageGalleryContainer, {
+                    descriptiveContent: hasDescriptiveContent,
+                    children: [
+                        /*#__PURE__*/ jsx(BaseGallery, {
+                            startIndex: startIndex,
+                            images: images,
+                            thumbnailImages: thumbnailImages,
+                            onSlideChanged: handleChange,
+                            children: children
+                        }),
+                        images && true === descriptiveContent ? /*#__PURE__*/ jsx(ImageGalleryContent, {
+                            imageContent: images?.[currentIndex - 1]?.content
+                        }) : null,
+                        'function' == typeof descriptiveContent ? descriptiveContent?.(currentIndex - 1) : null
+                    ]
+                })
+            ]
+        })
+    });
+});
+export { ImageGallery };

package/dist/components/modals/image-gallery/ImageGallery.stories.helper.js

@@ -0,0 +1,112 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import gallery_01 from "../../../../../web-essentials/stories/assets/gallery-01.webp";
+import gallery_02 from "../../../../../web-essentials/stories/assets/gallery-02.webp";
+import gallery_03 from "../../../../../web-essentials/stories/assets/gallery-03.webp";
+import gallery_04 from "../../../../../web-essentials/stories/assets/gallery-04.webp";
+import gallery_05 from "../../../../../web-essentials/stories/assets/gallery-05.webp";
+import gallery_06 from "../../../../../web-essentials/stories/assets/gallery-06.webp";
+import gallery_07 from "../../../../../web-essentials/stories/assets/gallery-07.webp";
+import gallery_08 from "../../../../../web-essentials/stories/assets/gallery-08.webp";
+import gallery_09 from "../../../../../web-essentials/stories/assets/gallery-09.webp";
+import gallery_10 from "../../../../../web-essentials/stories/assets/gallery-10.webp";
+const ImageGallery_stories_helper_images = [
+    {
+        src: gallery_01,
+        alt: 'Asset1',
+        imageContent: {
+            title: 'Asset 1',
+            body: "Asset 1 description"
+        }
+    },
+    {
+        src: gallery_02,
+        alt: 'Asset2',
+        containMode: true,
+        imageContent: {
+            title: 'Asset 2',
+            body: /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        children: "Asset 2 description with some html inside."
+                    }),
+                    /*#__PURE__*/ jsxs("ul", {
+                        children: [
+                            /*#__PURE__*/ jsx("li", {
+                                children: "bullet point 1"
+                            }),
+                            /*#__PURE__*/ jsx("li", {
+                                children: "bullet point 2"
+                            })
+                        ]
+                    })
+                ]
+            })
+        }
+    },
+    {
+        src: gallery_03,
+        alt: 'Asset3',
+        containMode: true,
+        imageContent: {
+            title: 'Asset 3',
+            body: "Asset 3 description"
+        }
+    },
+    {
+        src: gallery_04,
+        alt: 'Asset4',
+        imageContent: {
+            title: 'Asset 4',
+            body: "Asset 4 description"
+        }
+    },
+    {
+        src: gallery_05,
+        alt: 'Asset5',
+        imageContent: {
+            title: 'Asset 5',
+            body: "Asset 5 description"
+        }
+    },
+    {
+        src: gallery_06,
+        alt: 'Asset6',
+        imageContent: {
+            title: 'Asset 6',
+            body: "Asset 6 description"
+        }
+    },
+    {
+        src: gallery_07,
+        alt: 'Asset7',
+        imageContent: {
+            title: 'Asset 7',
+            body: "Asset 7 description"
+        }
+    },
+    {
+        src: gallery_08,
+        alt: 'Asset8',
+        imageContent: {
+            title: 'Asset 8',
+            body: "Asset 8 description"
+        }
+    },
+    {
+        src: gallery_09,
+        alt: 'Asset9',
+        imageContent: {
+            title: 'Asset 9',
+            body: "Asset 9 description"
+        }
+    },
+    {
+        src: gallery_10,
+        alt: 'Asset10',
+        imageContent: {
+            title: 'Asset 10',
+            body: "Asset 1\xdf description"
+        }
+    }
+];
+export { ImageGallery_stories_helper_images as images };

package/dist/components/modals/image-gallery/ImageGalleryContent.d.ts

@@ -0,0 +1,9 @@
+export interface ImageDescriptiveContent {
+    title: string;
+    body: React.ReactNode;
+}
+interface ImageGalleryContentProps {
+    imageContent?: ImageDescriptiveContent;
+}
+export declare function ImageGalleryContent({ imageContent, }: ImageGalleryContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/image-gallery/ImageGalleryContent.js

@@ -0,0 +1,15 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ImageGalleryContent({ imageContent }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: imageContent && /*#__PURE__*/ jsxs("div", {
+            className: "fwe-image-gallery-content",
+            children: [
+                /*#__PURE__*/ jsx("h3", {
+                    children: imageContent.title
+                }),
+                imageContent.body
+            ]
+        })
+    });
+}
+export { ImageGalleryContent };

package/dist/components/modals/image-gallery/ImageGalleryContext.d.ts

@@ -0,0 +1,10 @@
+import type { Swiper as SwiperClass } from 'swiper';
+interface ContextProps {
+    thumbsSwiper: SwiperClass | null;
+    setThumbsSwiper: React.Dispatch<React.SetStateAction<SwiperClass | null>>;
+    onSlideChanged?: (value: number) => void;
+    startIndex?: number;
+}
+export declare const ImageGalleryContext: import("react").Context<Partial<ContextProps>>;
+export declare const SwiperContext: import("react").Context<"gallery" | "thumbs">;
+export {};

package/dist/components/modals/image-gallery/ImageGalleryContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const ImageGalleryContext = createContext({});
+const SwiperContext = createContext('gallery');
+export { ImageGalleryContext, SwiperContext };

package/dist/components/modals/image-gallery/ImageGallerySwiper.d.ts

@@ -0,0 +1,8 @@
+interface ImageGallerySwiperProps {
+    children: React.ReactNode;
+}
+export declare function ImageGallerySwiper({ children }: ImageGallerySwiperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ImageGallerySwiper {
+    var displayName: string;
+}
+export {};

package/dist/components/modals/image-gallery/ImageGallerySwiper.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Navigation, Thumbs } from "swiper/modules";
+import { Swiper } from "swiper/react";
+import { ImageGalleryContext } from "./ImageGalleryContext.js";
+function ImageGallerySwiper({ children }) {
+    const { thumbsSwiper, startIndex, onSlideChanged } = useContext(ImageGalleryContext);
+    return /*#__PURE__*/ jsx(Swiper, {
+        initialSlide: startIndex,
+        thumbs: {
+            swiper: thumbsSwiper
+        },
+        modules: [
+            Thumbs,
+            Navigation
+        ],
+        navigation: {
+            nextEl: '.fwe-navigate-btn-up',
+            prevEl: '.fwe-navigate-btn-down'
+        },
+        zoom: true,
+        className: "gallery-swiper fwe-image-gallery",
+        spaceBetween: 0,
+        onSlideChange: (slider)=>onSlideChanged?.(slider.activeIndex),
+        children: children
+    });
+}
+ImageGallerySwiper.displayName = 'Swiper';
+export { ImageGallerySwiper };

package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.d.ts

@@ -0,0 +1,5 @@
+interface ImageGalleryThumbsSwiperProps {
+    children: React.ReactNode;
+}
+export declare function ImageGalleryThumbsSwiper({ children, }: ImageGalleryThumbsSwiperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/image-gallery/ImageGalleryThumbsSwiper.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Thumbs } from "swiper/modules";
+import { Swiper } from "swiper/react";
+import { ImageGalleryContext, SwiperContext } from "./ImageGalleryContext.js";
+function ImageGalleryThumbsSwiper({ children }) {
+    const { setThumbsSwiper } = useContext(ImageGalleryContext);
+    return /*#__PURE__*/ jsx(SwiperContext.Provider, {
+        value: "thumbs",
+        children: /*#__PURE__*/ jsx(Swiper, {
+            freeMode: true,
+            slidesPerView: "auto",
+            className: "thumbs-swiper fwe-image-gallery-thumbs",
+            modules: [
+                Thumbs
+            ],
+            watchSlidesProgress: true,
+            onSwiper: setThumbsSwiper,
+            children: children
+        })
+    });
+}
+export { ImageGalleryThumbsSwiper };

package/dist/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.css

@@ -0,0 +1,10 @@
+.fwe-image-gallery .fr-image-gallery-item--contain img {
+  object-fit: contain;
+  padding: 24px;
+}
+
+.fwe-image-gallery-thumbs.swiper .fr-image-gallery-item--contain img {
+  object-fit: contain;
+  padding: 4px;
+}
+

package/dist/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.d.ts

@@ -0,0 +1,11 @@
+import { type SwiperSlideProps } from 'swiper/react';
+import './ImageGalleryItem.scss';
+interface ImageGalleryItemProps extends SwiperSlideProps {
+    children: React.ReactNode;
+    containMode?: boolean;
+}
+export declare function ImageGalleryItem({ children, containMode, className, ...props }: ImageGalleryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ImageGalleryItem {
+    var displayName: string;
+}
+export {};

package/dist/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { SwiperSlide } from "swiper/react";
+import "./ImageGalleryItem.css";
+import { useContext } from "react";
+import { SwiperContext } from "../ImageGalleryContext.js";
+function ImageGalleryItem({ children, containMode, className, ...props }) {
+    const swiperType = useContext(SwiperContext);
+    const isThumbsSwiper = 'thumbs' === swiperType;
+    return /*#__PURE__*/ jsx(SwiperSlide, {
+        ...props,
+        className: classnames(className, {
+            'fr-image-gallery-item--contain': containMode && isThumbsSwiper
+        }),
+        children: isThumbsSwiper ? children : /*#__PURE__*/ jsx("div", {
+            className: classnames('swiper-zoom-container', {
+                'fr-image-gallery-item--contain': containMode
+            }),
+            children: children
+        })
+    });
+}
+ImageGalleryItem.displayName = 'SwiperSlide';
+export { ImageGalleryItem };

package/dist/components/modals/image-gallery/internal/BaseGallery.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { ClassNamePropsWithChildren } from '../../../../utils/types';
+import type { ImageDescriptiveContent } from '../ImageGalleryContent';
+export interface ImageGalleryItemDataBase extends ComponentPropsWithoutRef<'img'>, Record<string, unknown> {
+    containMode?: boolean;
+}
+export type ImageGalleryItemData = {
+    content?: ImageDescriptiveContent;
+} & ImageGalleryItemDataBase;
+interface BaseGalleryProps extends ClassNamePropsWithChildren {
+    readonly images?: ImageGalleryItemData[];
+    readonly thumbnailImages?: ImageGalleryItemDataBase[];
+    readonly onSlideChanged?: (value: number) => void;
+    readonly startIndex?: number;
+}
+export declare function BaseGallery({ images, thumbnailImages, onSlideChanged, startIndex, children, }: BaseGalleryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/image-gallery/internal/BaseGallery.js

@@ -0,0 +1,50 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ImageGalleryContext } from "../ImageGalleryContext.js";
+import { ImageGallerySwiper } from "../ImageGallerySwiper.js";
+import { ImageGalleryThumbsSwiper } from "../ImageGalleryThumbsSwiper.js";
+import { ImageGalleryItem } from "../image-gallery-item/ImageGalleryItem.js";
+function BaseGallery({ images, thumbnailImages, onSlideChanged, startIndex, children }) {
+    const [thumbsSwiper, setThumbsSwiper] = useState(null);
+    const contextValue = useMemo(()=>({
+            thumbsSwiper,
+            setThumbsSwiper,
+            onSlideChanged,
+            startIndex
+        }), [
+        thumbsSwiper,
+        onSlideChanged,
+        startIndex
+    ]);
+    return /*#__PURE__*/ jsx(ImageGalleryContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "fwe-image-gallery-wrapper",
+            children: children || /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(ImageGallerySwiper, {
+                        children: images?.map(({ containMode, alt, content, ...image })=>/*#__PURE__*/ jsx(ImageGalleryItem, {
+                                containMode: containMode,
+                                children: /*#__PURE__*/ jsx("img", {
+                                    ...image,
+                                    className: image.className,
+                                    alt: alt
+                                })
+                            }, image.src))
+                    }),
+                    thumbnailImages && /*#__PURE__*/ jsx(ImageGalleryThumbsSwiper, {
+                        children: thumbnailImages.map(({ containMode, alt, content, ...image })=>/*#__PURE__*/ jsx(ImageGalleryItem, {
+                                containMode: containMode,
+                                children: /*#__PURE__*/ jsx("img", {
+                                    ...image,
+                                    className: image.className,
+                                    alt: alt
+                                })
+                            }, image.src))
+                    })
+                ]
+            })
+        })
+    });
+}
+export { BaseGallery };

package/dist/components/modals/image-gallery/internal/CloseButton.d.ts

@@ -0,0 +1,6 @@
+interface CloseButtonProps {
+    onClose?: () => void;
+    showScaleButton?: boolean;
+}
+export declare function CloseButton({ onClose, showScaleButton }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/image-gallery/internal/CloseButton.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+function CloseButton({ onClose, showScaleButton }) {
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        "aria-label": "close",
+        className: classnames('fwe-image-gallery-close-btn', {
+            'fwe-ml-auto': !showScaleButton,
+            'fwe-ml-3': showScaleButton
+        }),
+        onClick: onClose
+    });
+}
+export { CloseButton };

package/dist/components/modals/image-gallery/internal/ImageGalleryContainer.d.ts

@@ -0,0 +1,5 @@
+export interface ImageGalleryContainerProps {
+    children: React.ReactNode;
+    descriptiveContent?: boolean;
+}
+export declare function ImageGalleryContainer({ children, descriptiveContent, }: ImageGalleryContainerProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/components/modals/image-gallery/internal/ImageGalleryContainer.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+function ImageGalleryContainer({ children, descriptiveContent }) {
+    return descriptiveContent ? /*#__PURE__*/ jsx("div", {
+        className: "fwe-image-gallery-container",
+        children: children
+    }) : children;
+}
+export { ImageGalleryContainer };

package/dist/components/modals/image-gallery/internal/ImageGalleryPagination.d.ts

@@ -0,0 +1,5 @@
+export interface ImageGalleryPaginationProps {
+    currentIndex: number;
+    length?: number;
+}
+export declare function ImageGalleryPagination({ currentIndex, length, }: ImageGalleryPaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/image-gallery/internal/ImageGalleryPagination.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ImageGalleryPagination({ currentIndex, length }) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: length && /*#__PURE__*/ jsxs("div", {
+            className: "fwe-pagination fwe-pagination--on-dark-bg",
+            children: [
+                /*#__PURE__*/ jsx("button", {
+                    "aria-label": "previous",
+                    type: "button",
+                    className: "fwe-navigate-btn-down"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "fwe-page-current",
+                    children: currentIndex
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "fwe-page-max",
+                    children: length
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    "aria-label": "next",
+                    type: "button",
+                    className: "fwe-navigate-btn-up"
+                })
+            ]
+        })
+    });
+}
+export { ImageGalleryPagination };

package/dist/components/modals/image-gallery/internal/ScaleButton.d.ts

@@ -0,0 +1,4 @@
+export interface ScaleButtonProps {
+    onScaleChange?: (value: boolean) => void;
+}
+export declare function ScaleButton({ onScaleChange }: ScaleButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/image-gallery/internal/ScaleButton.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+function ScaleButton({ onScaleChange }) {
+    const [isScaled, setScaled] = useState(false);
+    function handleScale() {
+        const newScaled = !isScaled;
+        setScaled(newScaled);
+        onScaleChange?.(newScaled);
+    }
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        "aria-label": "scale up",
+        className: "fwe-image-gallery-scale-btn fwe-ml-auto",
+        onClick: handleScale
+    });
+}
+export { ScaleButton };

package/dist/components/pagination/Pagination.css

@@ -0,0 +1,10 @@
+.fwe-page-dot {
+  border: none;
+  padding: 0;
+}
+
+.fwe-page-dot:focus {
+  background: var(--fwe-control-border-hover);
+  outline: 0;
+}
+

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,15 @@
+import './Pagination.scss';
+import type { ClassNameProps } from '../../utils/types';
+export declare enum PaginationType {
+    Simple = "SIMPLE",
+    Numeric = "NUMERIC",
+    Dots = "DOTS"
+}
+export interface PaginationProps extends ClassNameProps {
+    readonly type?: PaginationType;
+    readonly onChange?: (page: number) => void;
+    readonly pageCurrent?: number;
+    readonly defaultPageCurrent?: number;
+    readonly pageMax: number;
+}
+export declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;