@expofp/ui 0.0.0-experimental.2d6c681

package/dist/components/DownloadList/DownloadList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './DownloadList.scss';
+function DownloadListItem({ fileName, path, downloadLabel }) {
+    return (_jsxs("a", { className: "efp-download-list__item", href: path, download: true, target: "_blank", rel: "noopener noreferrer", "aria-label": downloadLabel(fileName), children: [_jsx("div", { className: "efp-download-list__item-icon", children: _jsx("i", { className: "icon-file-solid", "aria-hidden": "true" }) }), _jsx("div", { className: "efp-download-list__item-name", children: _jsx("span", { children: fileName }) }), _jsx("div", { className: "efp-download-list__item-download", children: _jsx("i", { className: "icon-download", "aria-hidden": "true" }) })] }));
+}
+function DownloadList({ list, title, downloadLabel }) {
+    return (_jsxs("div", { className: "efp-download-list", children: [_jsx("div", { className: "efp-download-list__title font-medium", children: title }), _jsx("ul", { className: "efp-download-list__list", children: list.map((item) => (_jsx("li", { children: _jsx(DownloadListItem, { fileName: item.fileName, path: item.path, downloadLabel: downloadLabel }) }, item.path))) })] }));
+}
+export default DownloadList;

package/dist/components/DownloadList/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './DownloadList';
+export type { DownloadListProps, DownloadItem } from './DownloadList';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DownloadList/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './DownloadList';

package/dist/components/Draggable/Draggable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface DraggableProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Draggable: ({ children, className, style }: DraggableProps) => React.JSX.Element;
+export default Draggable;
+//# sourceMappingURL=Draggable.d.ts.map

package/dist/components/Draggable/Draggable.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @eslint-react/exhaustive-deps */
+import { useEffect, useRef, useState } from 'react';
+import { isInteractiveTarget } from '../../shared/interactive';
+const Draggable = ({ children, className, style }) => {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const draggableRef = useRef(null);
+    const handleMouseDown = (e) => {
+        if (isInteractiveTarget(e.target)) {
+            return;
+        }
+        setIsDragging(true);
+        setDragStart({
+            x: e.clientX - position.x,
+            y: e.clientY - position.y,
+        });
+        e.preventDefault();
+    };
+    const handleMouseMove = (e) => {
+        if (!isDragging)
+            return;
+        const newX = e.clientX - dragStart.x;
+        const newY = e.clientY - dragStart.y;
+        setPosition({ x: newX, y: newY });
+    };
+    const handleMouseUp = () => {
+        endDrag();
+    };
+    const handleTouchStart = (e) => {
+        if (isInteractiveTarget(e.target)) {
+            return;
+        }
+        const touch = e.touches[0];
+        setIsDragging(true);
+        setDragStart({
+            x: touch.clientX - position.x,
+            y: touch.clientY - position.y,
+        });
+    };
+    const handleTouchMove = (e) => {
+        if (!isDragging)
+            return;
+        const touch = e.touches[0];
+        const newX = touch.clientX - dragStart.x;
+        const newY = touch.clientY - dragStart.y;
+        setPosition({ x: newX, y: newY });
+    };
+    const handleTouchEnd = () => {
+        endDrag();
+    };
+    const endDrag = () => {
+        if (!draggableRef.current)
+            return;
+        const rect = draggableRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const limitWidth = rect.width / 4;
+        const limitHeight = rect.height / 4;
+        const hiddenLeft = Math.max(0, 0 - rect.left);
+        const hiddenRight = Math.max(0, rect.right - viewportWidth);
+        const hiddenTop = Math.max(0, 0 - rect.top);
+        const hiddenBottom = Math.max(0, rect.bottom - viewportHeight);
+        const isPartiallyOutX = hiddenLeft > limitWidth || hiddenRight > limitWidth;
+        const isPartiallyOutY = hiddenTop > limitHeight || hiddenBottom > limitHeight;
+        if (isPartiallyOutX || isPartiallyOutY) {
+            setPosition({ x: 0, y: 0 });
+        }
+        setIsDragging(false);
+    };
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('touchmove', handleTouchMove, { passive: false });
+        document.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [isDragging, dragStart]);
+    return (_jsx("div", { ref: draggableRef, className: className, style: {
+            ...style,
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            cursor: isDragging ? 'grabbing' : 'grab',
+        }, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: children }));
+};
+export default Draggable;

package/dist/components/Draggable/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Draggable';
+export type { DraggableProps } from './Draggable';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Draggable/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './Draggable';

package/dist/components/EntityItem/EntityItem.d.ts

@@ -0,0 +1,46 @@
+import './EntityItem.scss';
+import React from 'react';
+export type EntityItemAdditionalInfo = {
+    type: 'location';
+    locationName?: string;
+    hall?: string;
+    level?: string;
+    showLevelLabel?: boolean;
+} | {
+    type: 'text';
+    text: string;
+};
+export interface EntityItemProps {
+    id: string;
+    title: string;
+    subtitle?: string;
+    image?: string;
+    icon?: string;
+    typeColor?: string;
+    iconClassName?: string;
+    variant?: 'default' | 'person';
+    titleBadge?: string | number;
+    datetime?: {
+        date?: string;
+        time?: string;
+    };
+    subtitleLabel?: string;
+    additionalInfo?: EntityItemAdditionalInfo[];
+    bookmarked?: boolean;
+    featured?: boolean;
+    visited?: boolean;
+    current?: boolean;
+    heatmapColor?: string;
+    accentBorderColor?: string;
+    hideUserState?: boolean;
+    compactDetails?: boolean;
+    secondaryText?: string;
+    highlight?: string;
+    featuredLabel: string;
+    hallLabel: string;
+    levelLabel: string;
+    onClick?: (id: string) => void;
+}
+declare const EntityItem: ({ id, title, subtitle, image, icon, typeColor, iconClassName, variant, titleBadge, datetime, subtitleLabel, additionalInfo, bookmarked, featured, visited, current, heatmapColor, accentBorderColor, hideUserState, compactDetails, secondaryText, highlight, featuredLabel, hallLabel, levelLabel, onClick, }: EntityItemProps) => React.JSX.Element;
+export default EntityItem;
+//# sourceMappingURL=EntityItem.d.ts.map

package/dist/components/EntityItem/EntityItem.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './EntityItem.scss';
+import cn from 'classnames';
+import HighlightText from '../HighlightText';
+const EntityItem = ({ id, title, subtitle, image, icon, typeColor, iconClassName, variant = 'default', titleBadge, datetime, subtitleLabel, additionalInfo = [], bookmarked = false, featured = false, visited, current = false, heatmapColor, accentBorderColor, hideUserState = false, compactDetails, secondaryText, highlight, featuredLabel, hallLabel, levelLabel, onClick, }) => {
+    const hasDatetime = !!(datetime?.date || datetime?.time);
+    const hasSubtitleRow = hasDatetime || !!subtitleLabel || !!subtitle;
+    return (_jsx("div", { role: "button", className: cn('efp-entity-item', {
+            'is-featured': featured,
+            'is-visited': visited,
+            'is-current': current,
+            'has-heatmap': !!heatmapColor,
+            'has-accent': !!accentBorderColor,
+            'is-person': variant === 'person',
+        }), "aria-label": title, tabIndex: 0, "aria-current": current ? 'true' : undefined, onClick: () => onClick?.(id), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick?.(id);
+            }
+        }, style: {
+            ...(typeColor ? { '--item-type-color': typeColor } : {}),
+            ...(heatmapColor && { '--heatmap-color': heatmapColor }),
+            ...(accentBorderColor &&
+                { '--accent-border-color': accentBorderColor }),
+        }, children: _jsxs("div", { className: "efp-entity-item__body", children: [_jsxs("div", { className: "efp-entity-item__left", children: [_jsx("div", { className: "efp-entity-item__icon", children: icon ? (_jsx("img", { src: icon, alt: title })) : iconClassName ? (_jsx("i", { className: iconClassName, "aria-hidden": "true" })) : null }), !hideUserState && (_jsxs(_Fragment, { children: [visited && (_jsx("div", { className: "efp-entity-item__visited", children: _jsx("i", { className: "icon-checkmark" }) })), bookmarked && (_jsx("i", { className: cn('efp-entity-item__bookmarked', 'icon-bookmark-solid') }))] }))] }), _jsxs("div", { className: "efp-entity-item__right", children: [_jsxs("div", { className: cn('efp-entity-item__content', { 'with-image': image }), children: [_jsxs("div", { className: "efp-entity-item__header", children: [_jsxs("div", { className: "efp-entity-item__title", children: [_jsx(HighlightText, { text: title, highlight: highlight }), secondaryText && (_jsx("div", { className: "efp-entity-item__description", children: _jsx(HighlightText, { text: secondaryText, highlight: highlight }) })), titleBadge !== undefined && _jsx("span", { children: titleBadge })] }), featured && _jsx("div", { className: "efp-entity-item__featured", children: featuredLabel })] }), hasSubtitleRow && (_jsxs("div", { className: "efp-entity-item__subtitle", children: [hasDatetime && (_jsxs("div", { className: "efp-entity-item__datetime", children: [datetime?.date && _jsx("strong", { children: datetime.date }), datetime?.time && _jsx("span", { children: datetime.time })] })), subtitleLabel && _jsx("span", { children: subtitleLabel }), subtitle && _jsx("div", { children: subtitle })] })), !!additionalInfo.length && (_jsx("ul", { className: cn('efp-entity-item__details', {
+                                        'compact-details': compactDetails,
+                                    }), children: additionalInfo.map((info, idx) => (_jsxs("li", { className: "efp-entity-item__details-item", children: [info.type === 'location' && (_jsxs(_Fragment, { children: [info.locationName && (_jsx("div", { className: "efp-entity-item__details-item-booth", children: _jsx(HighlightText, { text: info.locationName, highlight: highlight }) })), info.hall && (_jsxs("div", { children: [hallLabel, "\u00A0", _jsx("span", { children: info.hall })] })), info.level && (_jsxs("div", { children: [info.showLevelLabel && _jsxs("span", { children: [levelLabel, "\u00A0"] }), _jsx("span", { children: info.level })] }))] })), info.type === 'text' && _jsx("span", { children: info.text })] }, idx))) }))] }), image && (_jsx("div", { className: "efp-entity-item__image", children: _jsx("img", { src: image, alt: title }) }))] })] }) }));
+};
+export default EntityItem;

package/dist/components/EntityItem/index.d.ts

@@ -0,0 +1,3 @@
+export type { EntityItemAdditionalInfo, EntityItemProps } from './EntityItem';
+export { default } from './EntityItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/EntityItem/index.js

@@ -0,0 +1 @@
+export { default } from './EntityItem';

package/dist/components/EventBadge/EventBadge.d.ts

@@ -0,0 +1,13 @@
+import './EventBadge.scss';
+export type EventBadgeStatus = 'live' | 'upcoming' | 'starting-soon' | 'past' | 'none';
+export interface EventBadgeProps {
+    status: EventBadgeStatus;
+    statusLabel?: string;
+    showFullBadge?: boolean;
+    fullLabel: string;
+    isUrgent?: boolean;
+    className?: string;
+}
+declare const EventBadge: ({ status, statusLabel, showFullBadge, fullLabel, isUrgent, className, }: EventBadgeProps) => import("react").JSX.Element | null;
+export default EventBadge;
+//# sourceMappingURL=EventBadge.d.ts.map

package/dist/components/EventBadge/EventBadge.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './EventBadge.scss';
+import classNames from 'classnames';
+const EventBadge = ({ status, statusLabel, showFullBadge = false, fullLabel, isUrgent = false, className = '', }) => {
+    const mainBadge = status !== 'none' ? (_jsx("div", { className: classNames('efp-event-badge', `efp-event-badge--${status}`, { 'is-urgent': isUrgent }, className), children: statusLabel })) : null;
+    if (!mainBadge && !showFullBadge)
+        return null;
+    return (_jsxs(_Fragment, { children: [mainBadge, showFullBadge && (_jsx("div", { className: classNames('efp-event-badge', 'efp-event-badge--full', className), children: fullLabel }))] }));
+};
+export default EventBadge;

package/dist/components/EventBadge/index.d.ts

@@ -0,0 +1,3 @@
+export type { EventBadgeProps, EventBadgeStatus } from './EventBadge';
+export { default } from './EventBadge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/EventBadge/index.js

@@ -0,0 +1 @@
+export { default } from './EventBadge';

package/dist/components/Gallery/Gallery.d.ts

@@ -0,0 +1,24 @@
+import './Gallery.scss';
+import React from 'react';
+import type { GalleryImage } from './types';
+export interface GalleryProps {
+    images: GalleryImage[];
+    leading?: boolean;
+    closeLabel: string;
+    zoomInLabel: string;
+    zoomOutLabel: string;
+    nextSlideLabel: string;
+    prevSlideLabel: string;
+    fullscreenLabel: string;
+    itemLabel: (index: number) => string;
+    renderTarget?: HTMLElement | null;
+    onImageLoadHeightUpdate?: () => void;
+    /** Fired with the index of the slide shown fullscreen, on open and on slide change. */
+    onSlideActivate?: (index: number) => void;
+    onOpenGallery?: () => void;
+    onCloseGallery?: () => void;
+    className?: string;
+}
+declare const Gallery: (props: GalleryProps) => React.JSX.Element;
+export default Gallery;
+//# sourceMappingURL=Gallery.d.ts.map

package/dist/components/Gallery/Gallery.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Gallery.scss';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import GalleryBadges from './GalleryBadges/GalleryBadges';
+import GalleryItem from './GalleryItem/GalleryItem';
+import GalleryModal from './GalleryModal/GalleryModal';
+const Gallery = (props) => {
+    const { images, leading = false, closeLabel, zoomInLabel, zoomOutLabel, nextSlideLabel, prevSlideLabel, fullscreenLabel, itemLabel, renderTarget, onImageLoadHeightUpdate, onSlideActivate, onOpenGallery, onCloseGallery, className, } = props;
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
+    const openModal = (initialSlideIndex) => {
+        // No portal target, no modal — and no opening to report either.
+        if (!renderTarget)
+            return;
+        setCurrentSlideIndex(initialSlideIndex);
+        setIsModalOpen(true);
+        onOpenGallery?.();
+    };
+    const closeModal = () => {
+        setIsModalOpen(false);
+        onCloseGallery?.();
+    };
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: classNames('efp-gallery', {
+                    'efp-gallery--leading': leading,
+                }, className), children: [_jsx("div", { className: "efp-gallery__wrapper", children: leading ? (_jsx(GalleryItem, { url: images[0].thumbnailUrl, index: 0, itemLabel: itemLabel, leading: leading, autoHeight: true, fillMode: "contain", onClick: () => openModal(0), onImageLoadHeightUpdate: onImageLoadHeightUpdate })) : (images.map((image, i) => (_jsx(GalleryItem, { url: image.thumbnailUrl, index: i, itemLabel: itemLabel, position: "top", fillMode: "cover", onClick: () => openModal(i), onImageLoadHeightUpdate: onImageLoadHeightUpdate }, image.thumbnailUrl + i)))) }), !leading && (_jsx(GalleryBadges, { fullscreenLabel: fullscreenLabel, onFullscreen: () => openModal(0), count: images.length }))] }), isModalOpen && renderTarget && (_jsx(GalleryModal, { className: className, images: images, leading: leading, initialSlideIndex: currentSlideIndex, closeLabel: closeLabel, zoomInLabel: zoomInLabel, zoomOutLabel: zoomOutLabel, nextSlideLabel: nextSlideLabel, prevSlideLabel: prevSlideLabel, itemLabel: itemLabel, renderTarget: renderTarget, onSlideActivate: onSlideActivate, onClose: closeModal }))] }));
+};
+export default Gallery;

package/dist/components/Gallery/GalleryBadges/GalleryBadges.d.ts

@@ -0,0 +1,8 @@
+export interface GalleryBadgesProps {
+    count: number;
+    fullscreenLabel: string;
+    onFullscreen: () => void;
+}
+declare const GalleryBadges: ({ count, fullscreenLabel, onFullscreen }: GalleryBadgesProps) => import("react").JSX.Element;
+export default GalleryBadges;
+//# sourceMappingURL=GalleryBadges.d.ts.map

package/dist/components/Gallery/GalleryBadges/GalleryBadges.js

@@ -0,0 +1,5 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GalleryBadges = ({ count, fullscreenLabel, onFullscreen }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "efp-gallery__badge efp-gallery__badge-count", children: [_jsx("i", { className: "icon-image", "aria-hidden": "true" }), _jsx("span", { children: count })] }), _jsx("button", { type: "button", className: "efp-gallery__badge efp-gallery__badge-fullscreen", "aria-label": fullscreenLabel, title: fullscreenLabel, onClick: onFullscreen, children: _jsx("i", { className: "icon-maximize", "aria-hidden": "true" }) })] }));
+};
+export default GalleryBadges;

package/dist/components/Gallery/GalleryControls/GalleryControls.d.ts

@@ -0,0 +1,11 @@
+export interface GalleryControlsProps {
+    closeLabel: string;
+    zoomInLabel: string;
+    zoomOutLabel: string;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    onClose: () => void;
+}
+declare const GalleryControls: ({ closeLabel, zoomInLabel, zoomOutLabel, zoomIn, zoomOut, onClose, }: GalleryControlsProps) => import("react").JSX.Element;
+export default GalleryControls;
+//# sourceMappingURL=GalleryControls.d.ts.map

package/dist/components/Gallery/GalleryControls/GalleryControls.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GalleryControls = ({ closeLabel, zoomInLabel, zoomOutLabel, zoomIn, zoomOut, onClose, }) => {
+    return (_jsxs("div", { className: "efp-gallery-slider__controls", children: [_jsx("button", { type: "button", className: "efp-gallery-slider__btn efp-gallery-slider__btn--close", title: closeLabel, "aria-label": closeLabel, onClick: onClose, children: _jsx("i", { className: "icon-close", "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "efp-gallery-slider__btn efp-gallery-slider__btn--zoom-in", title: zoomInLabel, "aria-label": zoomInLabel, onClick: () => zoomIn(), children: _jsx("i", { className: "icon-zoom-in", "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "efp-gallery-slider__btn efp-gallery-slider__btn--zoom-out", title: zoomOutLabel, "aria-label": zoomOutLabel, onClick: () => zoomOut(), children: _jsx("i", { className: "icon-zoom-out", "aria-hidden": "true" }) })] }));
+};
+export default GalleryControls;

package/dist/components/Gallery/GalleryImg/GalleryImg.d.ts

@@ -0,0 +1,13 @@
+type FillMode = 'cover' | 'contain';
+export interface GalleryImgProps {
+    url: string;
+    fillMode?: FillMode;
+    leading?: boolean;
+    autoHeight?: boolean;
+    fullscreen?: boolean;
+    position?: 'center' | 'top';
+    onImageLoadHeightUpdate?: () => void;
+}
+declare const GalleryImg: ({ url, autoHeight, position, fullscreen, leading, fillMode, onImageLoadHeightUpdate, }: GalleryImgProps) => import("react").JSX.Element;
+export default GalleryImg;
+//# sourceMappingURL=GalleryImg.d.ts.map

package/dist/components/Gallery/GalleryImg/GalleryImg.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import GalleryPreLoader from '../GalleryPreLoader';
+const GalleryImg = ({ url, autoHeight = false, position = 'center', fullscreen = false, leading = false, fillMode = 'contain', onImageLoadHeightUpdate, }) => {
+    const imgRef = useRef(null);
+    const containerRef = useRef(null);
+    const loadImage = useCallback(async (imageUrl) => {
+        if (!autoHeight || !containerRef.current)
+            return;
+        const container = containerRef.current;
+        try {
+            const loadedImage = await GalleryPreLoader.load(imageUrl);
+            if (!loadedImage)
+                return;
+            container.style.height =
+                (loadedImage.height * container.clientWidth) / loadedImage.width + 'px';
+            onImageLoadHeightUpdate?.();
+        }
+        catch {
+            // image failed to load — keep default height
+        }
+    }, [autoHeight, onImageLoadHeightUpdate]);
+    useEffect(() => {
+        if (!imgRef.current || !containerRef.current || !leading)
+            return;
+        void loadImage(url);
+    }, [url, leading, loadImage]);
+    const style = {
+        backgroundImage: `url("${url}")`,
+        backgroundSize: fillMode,
+        backgroundRepeat: 'no-repeat',
+        transition: leading ? 'all 0.5s ease 0s' : 'none',
+        backgroundPosition: position,
+    };
+    return (_jsx("div", { ref: containerRef, style: { width: '100%', height: leading && !fullscreen ? '250px' : '100%' }, children: _jsx("div", { ref: imgRef, className: "efp-gallery__img", style: style }) }));
+};
+export default GalleryImg;

package/dist/components/Gallery/GalleryItem/GalleryItem.d.ts

@@ -0,0 +1,14 @@
+export interface GalleryItemProps {
+    url: string;
+    index: number;
+    itemLabel: (index: number) => string;
+    leading?: boolean;
+    autoHeight?: boolean;
+    fillMode?: 'cover' | 'contain';
+    position?: 'center' | 'top';
+    onClick: () => void;
+    onImageLoadHeightUpdate?: () => void;
+}
+declare const GalleryItem: ({ url, index, itemLabel, position, leading, autoHeight, fillMode, onClick, onImageLoadHeightUpdate, }: GalleryItemProps) => import("react").JSX.Element;
+export default GalleryItem;
+//# sourceMappingURL=GalleryItem.d.ts.map

package/dist/components/Gallery/GalleryItem/GalleryItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import GalleryImg from '../GalleryImg/GalleryImg';
+const GalleryItem = ({ url, index, itemLabel, position = 'center', leading = false, autoHeight = false, fillMode, onClick, onImageLoadHeightUpdate, }) => {
+    return (_jsx("button", { type: "button", className: "efp-gallery__item", "aria-label": itemLabel(index), onClick: onClick, children: _jsx(GalleryImg, { position: position, fillMode: fillMode, url: url, leading: leading, autoHeight: autoHeight, onImageLoadHeightUpdate: onImageLoadHeightUpdate }) }));
+};
+export default GalleryItem;

package/dist/components/Gallery/GalleryModal/GalleryModal.d.ts

@@ -0,0 +1,20 @@
+import './GalleryModal.scss';
+import type { GalleryImage } from '../types';
+export interface GalleryModalProps {
+    images: GalleryImage[];
+    leading: boolean;
+    initialSlideIndex: number;
+    closeLabel: string;
+    zoomInLabel: string;
+    zoomOutLabel: string;
+    nextSlideLabel: string;
+    prevSlideLabel: string;
+    itemLabel: (index: number) => string;
+    renderTarget: HTMLElement;
+    onSlideActivate?: (index: number) => void;
+    onClose: () => void;
+    className?: string;
+}
+declare const GalleryModal: (props: GalleryModalProps) => import("react").ReactPortal;
+export default GalleryModal;
+//# sourceMappingURL=GalleryModal.d.ts.map

package/dist/components/Gallery/GalleryModal/GalleryModal.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './GalleryModal.scss';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { TransformWrapper } from 'react-zoom-pan-pinch-sr';
+import { Navigation } from 'swiper';
+import { Swiper as SwiperComponent, SwiperSlide } from 'swiper/react';
+import { getActiveElement } from '../../../shared/activeElement';
+import useOnEscape from '../../../shared/hooks/useOnEscape';
+import GalleryControls from '../GalleryControls/GalleryControls';
+import TransformImg from '../TransformImg/TransformImg';
+const isElementVisible = (el) => el.getClientRects().length > 0 && getComputedStyle(el).visibility !== 'hidden';
+const GalleryModal = (props) => {
+    const { images, leading, initialSlideIndex, closeLabel, zoomInLabel, zoomOutLabel, nextSlideLabel, prevSlideLabel, itemLabel, renderTarget, onSlideActivate, onClose, className, } = props;
+    const [currentSlideIndex, setCurrentSlideIndex] = useState(initialSlideIndex);
+    const [zoomUtils, setZoomUtils] = useState([]);
+    const swiperRef = useRef(null);
+    const prevRef = useRef(null);
+    const nextRef = useRef(null);
+    const modalRef = useRef(null);
+    useOnEscape(onClose);
+    // Scroll lock + focus trap/restore. Runs once for the modal's whole mounted
+    // lifetime — the parent only mounts this component while the modal is open.
+    useEffect(() => {
+        const previousFocus = getActiveElement(modalRef.current);
+        const previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        let inner = 0;
+        const outer = requestAnimationFrame(() => {
+            inner = requestAnimationFrame(() => modalRef.current?.focus());
+        });
+        const handleKeyDown = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            const container = modalRef.current;
+            if (!container)
+                return;
+            const focusable = Array.from(container.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(isElementVisible);
+            if (focusable.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const active = getActiveElement(container);
+            if (e.shiftKey) {
+                if (active === first || active === container) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            }
+            else if (active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            cancelAnimationFrame(outer);
+            cancelAnimationFrame(inner);
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = previousBodyOverflow;
+            previousFocus?.focus();
+        };
+    }, []);
+    useEffect(() => {
+        onSlideActivate?.(currentSlideIndex);
+    }, [currentSlideIndex, onSlideActivate]);
+    const mainSliderOptions = {
+        initialSlide: initialSlideIndex,
+        draggable: false,
+        modules: [Navigation],
+        spaceBetween: 50,
+        slidesPerView: 1,
+        navigation: {
+            prevEl: prevRef.current,
+            nextEl: nextRef.current,
+        },
+        grabCursor: true,
+    };
+    const modalContent = (_jsx("div", { className: classNames('efp-gallery-modal', className), role: "dialog", "aria-modal": "true", "aria-label": itemLabel(currentSlideIndex), ref: modalRef, tabIndex: -1, children: _jsxs(SwiperComponent, { onSwiper: (swiper) => (swiperRef.current = swiper), className: "efp-gallery-slider", onSlideChange: (swiper) => {
+                setCurrentSlideIndex(swiper.activeIndex);
+                zoomUtils[swiper.previousIndex]?.resetTransform();
+            }, ...mainSliderOptions, children: [zoomUtils[currentSlideIndex] ? (_jsx(GalleryControls, { closeLabel: closeLabel, zoomInLabel: zoomInLabel, zoomOutLabel: zoomOutLabel, onClose: onClose, zoomIn: zoomUtils[currentSlideIndex].zoomIn, zoomOut: zoomUtils[currentSlideIndex].zoomOut })) : null, images.length > 1 && (_jsx("button", { type: "button", ref: nextRef, title: nextSlideLabel, "aria-label": nextSlideLabel, className: "efp-gallery-slider__btn efp-gallery-slider__btn--next", children: _jsx("i", { className: "icon-chevron-right", "aria-hidden": "true" }) })), images.length > 1 && (_jsx("button", { type: "button", ref: prevRef, title: prevSlideLabel, "aria-label": prevSlideLabel, className: "efp-gallery-slider__btn efp-gallery-slider__btn--prev", children: _jsx("i", { className: "icon-chevron-left", "aria-hidden": "true" }) })), images.map((image, i) => (_jsx(SwiperSlide, { children: _jsx(TransformWrapper, { initialScale: 1, alignmentAnimation: { sizeX: 0, sizeY: 0 }, onInit: (controls) => {
+                            setZoomUtils((state) => [...state, controls]);
+                        }, children: _jsx(TransformImg, { leading: leading, swiperRef: swiperRef, url: image.fullUrl }) }) }, image.thumbnailUrl + i)))] }) }));
+    return createPortal(modalContent, renderTarget);
+};
+export default GalleryModal;

package/dist/components/Gallery/GalleryPreLoader.d.ts

@@ -0,0 +1,7 @@
+declare class GalleryPreLoader {
+    private cache;
+    load: (url: string) => Promise<HTMLImageElement | null>;
+}
+declare const _default: GalleryPreLoader;
+export default _default;
+//# sourceMappingURL=GalleryPreLoader.d.ts.map

package/dist/components/Gallery/GalleryPreLoader.js

@@ -0,0 +1,29 @@
+class GalleryPreLoader {
+    cache = [];
+    load = (url) => {
+        return new Promise((resolve, reject) => {
+            if (!url) {
+                resolve(null);
+                return;
+            }
+            const cached = this.cache.find((i) => i.src === url);
+            if (cached) {
+                resolve(cached);
+                return;
+            }
+            const image = new Image();
+            image.crossOrigin = 'anonymous';
+            image.src = url;
+            image.onload = () => {
+                if (this.cache.length > 10)
+                    this.cache.shift();
+                this.cache.push(image);
+                resolve(image);
+            };
+            image.onerror = () => {
+                reject(new Error(`Failed to load image: ${url}`));
+            };
+        });
+    };
+}
+export default new GalleryPreLoader();

package/dist/components/Gallery/TransformImg/TransformImg.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type Swiper as SwiperInstance } from 'swiper';
+export interface TransformImgProps {
+    swiperRef: React.RefObject<SwiperInstance | null>;
+    url: string;
+    leading: boolean;
+}
+declare const TransformImg: ({ swiperRef, leading, url }: TransformImgProps) => React.JSX.Element;
+export default TransformImg;
+//# sourceMappingURL=TransformImg.d.ts.map

package/dist/components/Gallery/TransformImg/TransformImg.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TransformComponent, useTransformEffect } from 'react-zoom-pan-pinch-sr';
+import GalleryImg from '../GalleryImg/GalleryImg';
+const TransformImg = ({ swiperRef, leading, url }) => {
+    useTransformEffect(({ state, instance }) => {
+        if (!swiperRef.current)
+            return;
+        swiperRef.current.allowTouchMove = state.scale === 1;
+        if (state.scale === 1 && state.positionX !== 0 && state.positionY !== 0) {
+            instance.setCenter();
+        }
+    });
+    return (_jsx(TransformComponent, { wrapperClass: "efp-gallery-slider__zoom", contentClass: "efp-gallery-slider__zoom-content", children: _jsx(GalleryImg, { fullscreen: true, leading: leading, url: url }) }));
+};
+export default TransformImg;

package/dist/components/Gallery/index.d.ts

@@ -0,0 +1,4 @@
+export type { GalleryProps } from './Gallery';
+export { default } from './Gallery';
+export type { GalleryImage } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Gallery/index.js

@@ -0,0 +1 @@
+export { default } from './Gallery';

package/dist/components/Gallery/types.d.ts

@@ -0,0 +1,6 @@
+export interface GalleryImage {
+    thumbnailUrl: string;
+    /** Shown fullscreen; may be the thumbnail when no larger source exists. */
+    fullUrl: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Gallery/types.js

@@ -0,0 +1 @@
+export {};