@festo-ui/react 9.0.0-dev.722 → 9.0.0-dev.724

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 } from './internal/BaseGallery';
+export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, ModalBaseProps {
+    /** Index number of initial slide. */
+    startIndex: number;
+    images?: ImageGalleryItemData[];
+    thumbnailImages?: ImageGalleryItemData[];
+    /** 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 && hasDescriptiveContent && /*#__PURE__*/ jsx(ImageGalleryContent, {
+                            imageContent: images?.[currentIndex - 1]?.imageContent
+                        }),
+                        '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 10 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,9 @@
+import type { ImageGalleryItemData } from './internal/BaseGallery';
+interface ImageGallerySwiperProps {
+    readonly images?: ImageGalleryItemData[];
+}
+export declare function ImageGallerySwiper({ images }: 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,39 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useContext } from "react";
+import { Navigation, Thumbs } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { ImageGalleryContext } from "./ImageGalleryContext.js";
+function ImageGallerySwiper({ images }) {
+    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: images?.map(({ containMode, alt, imageContent, ...image })=>/*#__PURE__*/ jsx(SwiperSlide, {
+                zoom: containMode,
+                children: /*#__PURE__*/ jsx("img", {
+                    ...image,
+                    className: classnames(image.className, {
+                        'fr-image-gallery-item-contain': containMode
+                    }),
+                    alt: alt
+                })
+            }, image.src))
+    });
+}
+ImageGallerySwiper.displayName = 'Swiper';
+export { ImageGallerySwiper };

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

@@ -0,0 +1,6 @@
+import type { ImageGalleryItemData } from './internal/BaseGallery';
+interface ImageGalleryThumbsSwiperProps {
+    readonly images?: ImageGalleryItemData[];
+}
+export declare function ImageGalleryThumbsSwiper({ images, }: ImageGalleryThumbsSwiperProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useContext } from "react";
+import { Thumbs } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { ImageGalleryContext, SwiperContext } from "./ImageGalleryContext.js";
+function ImageGalleryThumbsSwiper({ images }) {
+    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: images?.map(({ containMode, alt, imageContent, ...image })=>/*#__PURE__*/ jsx(SwiperSlide, {
+                    zoom: containMode,
+                    children: /*#__PURE__*/ jsx("img", {
+                        ...image,
+                        className: classnames(image.className, {
+                            'fr-image-gallery-item-thumb-contain': containMode
+                        }),
+                        alt: alt
+                    })
+                }, image.src))
+        })
+    });
+}
+export { ImageGalleryThumbsSwiper };

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

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { ClassNamePropsWithChildren } from '../../../../utils/types';
+import type { ImageDescriptiveContent } from '../ImageGalleryContent';
+export type ImageGalleryItemData = {
+    imageContent?: ImageDescriptiveContent;
+    containMode?: boolean;
+} & ComponentPropsWithoutRef<'img'> & Record<string, unknown>;
+interface BaseGalleryProps extends ClassNamePropsWithChildren {
+    readonly images?: ImageGalleryItemData[];
+    readonly thumbnailImages?: ImageGalleryItemData[];
+    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,35 @@
+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";
+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, {
+                        images: images
+                    }),
+                    thumbnailImages && /*#__PURE__*/ jsx(ImageGalleryThumbsSwiper, {
+                        images: thumbnailImages
+                    })
+                ]
+            })
+        })
+    });
+}
+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;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,100 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./Pagination.css";
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+var Pagination_PaginationType = /*#__PURE__*/ function(PaginationType) {
+    PaginationType["Simple"] = "SIMPLE";
+    PaginationType["Numeric"] = "NUMERIC";
+    PaginationType["Dots"] = "DOTS";
+    return PaginationType;
+}({});
+function Pagination(props) {
+    const { pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = "NUMERIC", className } = props;
+    const controlled = void 0 !== pageCurrent;
+    const dotArray = Array.from(new Array(pageMax).keys());
+    const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
+    useEffect(()=>{
+        if (controlled) setInnerPageCurrent(pageCurrent);
+    }, [
+        pageCurrent,
+        controlled
+    ]);
+    function handleChange(newPage) {
+        if (!controlled) setInnerPageCurrent(newPage);
+        if (onChange) onChange(newPage);
+    }
+    function onBtnDown() {
+        if (innerPageCurrent > 1) {
+            const newPageCurrent = innerPageCurrent - 1;
+            handleChange(newPageCurrent);
+        }
+    }
+    function onBtnUp() {
+        if (innerPageCurrent < pageMax) {
+            const newPageCurrent = innerPageCurrent + 1;
+            handleChange(newPageCurrent);
+        }
+    }
+    function onDotClick(index) {
+        const newPageCurrent = index + 1;
+        handleChange(newPageCurrent);
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            "DOTS" !== type && /*#__PURE__*/ jsxs("div", {
+                className: classnames('fwe-pagination fwe-p-m', {
+                    'fwe-d-none': pageMax < 2
+                }, className),
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        className: classnames('fwe-navigate-btn-down', {
+                            'fwe-disabled': innerPageCurrent <= 1
+                        }),
+                        onClick: onBtnDown,
+                        type: "button",
+                        "aria-label": "navigate-btn-down"
+                    }),
+                    "NUMERIC" === type && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-page-current",
+                                children: innerPageCurrent
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "fwe-page-max",
+                                children: pageMax
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: classnames('fwe-navigate-btn-up', {
+                            'fwe-disabled': innerPageCurrent >= pageMax,
+                            'fwe-ml-4': "SIMPLE" === type
+                        }),
+                        onClick: onBtnUp,
+                        type: "button",
+                        "aria-label": "navigate-btn-up"
+                    })
+                ]
+            }),
+            "DOTS" === type && /*#__PURE__*/ jsx("div", {
+                className: classnames('fwe-p-m', {
+                    'fwe-d-none': pageMax < 2
+                }, className),
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "fwe-pagination",
+                    children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: classnames('fwe-page-dot', {
+                                'fwe-selected': index + 1 === innerPageCurrent
+                            }),
+                            onClick: ()=>onDotClick(index),
+                            "aria-label": `Go to page ${index + 1}`,
+                            "aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
+                        }, index))
+                })
+            })
+        ]
+    });
+}
+export { Pagination, Pagination_PaginationType as PaginationType };