@festo-ui/react 9.0.0-dev.714 → 9.0.0-dev.716

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

@@ -1,18 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,10 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,10 +0,0 @@
-.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

@@ -1,15 +0,0 @@
-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;