@expofp/ui 0.0.0-experimental.cf063fc

package/dist/components/ScrollableRow/ScrollableRow.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/consistent-type-imports, @eslint-react/set-state-in-effect */
+import './ScrollableRow.scss';
+import cn from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ResizeObserver } from 'resize-observer';
+import { isInteractiveTarget } from '../../shared/interactive';
+const SCROLL_THRESHOLD = 5;
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+const ScrollableRow = ({ children, ariaLabel, leftAriaLabel, rightAriaLabel, className, scrollAmount = 150, mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT, showArrowsOnMobile = false, arrowPosition = 'inside', scrollBehavior = 'smooth', isRtl = false, enableDragScroll = true, dragScrollSensitivity = 1, onScroll, }) => {
+    const containerRef = useRef(null);
+    const scrollRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const [showLeftArrow, setShowLeftArrow] = useState(false);
+    const [showRightArrow, setShowRightArrow] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const [dragStartScrollLeft, setDragStartScrollLeft] = useState(0);
+    const isDesktop = useCallback(() => {
+        return (window.innerWidth > mobileBreakpoint &&
+            !('ontouchstart' in window || navigator.maxTouchPoints > 0));
+    }, [mobileBreakpoint]);
+    const normalizeRTLScroll = useCallback((scrollLeft, scrollWidth, clientWidth) => {
+        const maxScroll = scrollWidth - clientWidth;
+        if (scrollLeft < 0) {
+            return Math.abs(scrollLeft);
+        }
+        else if (scrollLeft > maxScroll / 2) {
+            return maxScroll - scrollLeft;
+        }
+        return scrollLeft;
+    }, []);
+    const checkArrows = useCallback(() => {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const isMobile = window.innerWidth <= mobileBreakpoint;
+        if (isMobile && !showArrowsOnMobile) {
+            setShowLeftArrow(false);
+            setShowRightArrow(false);
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = scrollEl;
+        const hasOverflow = scrollWidth > clientWidth;
+        if (!hasOverflow) {
+            setShowLeftArrow(false);
+            setShowRightArrow(false);
+            return;
+        }
+        if (isRtl) {
+            const maxScroll = scrollWidth - clientWidth;
+            const normalizedScroll = normalizeRTLScroll(scrollLeft, scrollWidth, clientWidth);
+            setShowLeftArrow(normalizedScroll > SCROLL_THRESHOLD);
+            setShowRightArrow(normalizedScroll < maxScroll - SCROLL_THRESHOLD);
+        }
+        else {
+            setShowLeftArrow(scrollLeft > SCROLL_THRESHOLD);
+            setShowRightArrow(scrollLeft < scrollWidth - clientWidth - SCROLL_THRESHOLD);
+        }
+    }, [mobileBreakpoint, showArrowsOnMobile, normalizeRTLScroll, isRtl]);
+    const handleScroll = useCallback(() => {
+        checkArrows();
+        if (onScroll && scrollRef.current) {
+            onScroll(scrollRef.current.scrollLeft);
+        }
+    }, [checkArrows, onScroll]);
+    const scroll = useCallback((direction) => {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const currentScroll = scrollEl.scrollLeft;
+        let newScroll;
+        if (isRtl) {
+            const maxScrollLeft = -(scrollEl.scrollWidth - scrollEl.clientWidth);
+            newScroll =
+                direction === 'left'
+                    ? Math.min(0, currentScroll + scrollAmount)
+                    : Math.max(maxScrollLeft, currentScroll - scrollAmount);
+        }
+        else {
+            newScroll =
+                direction === 'left'
+                    ? Math.max(0, currentScroll - scrollAmount)
+                    : currentScroll + scrollAmount;
+        }
+        scrollEl.scrollTo({
+            left: newScroll,
+            behavior: scrollBehavior,
+        });
+    }, [scrollAmount, scrollBehavior, isRtl]);
+    const handleMouseDown = useCallback((e) => {
+        if (!enableDragScroll || !isDesktop() || !scrollRef.current)
+            return;
+        if (isInteractiveTarget(e.target))
+            return;
+        setIsDragging(true);
+        setStartX(e.pageX - scrollRef.current.offsetLeft);
+        setDragStartScrollLeft(scrollRef.current.scrollLeft);
+        e.preventDefault();
+    }, [enableDragScroll, isDesktop]);
+    const handleMouseMove = useCallback((e) => {
+        if (!isDragging || !scrollRef.current)
+            return;
+        e.preventDefault();
+        const x = e.pageX - scrollRef.current.offsetLeft;
+        const walk = (x - startX) * dragScrollSensitivity;
+        scrollRef.current.scrollLeft = dragStartScrollLeft - walk;
+    }, [isDragging, startX, dragStartScrollLeft, dragScrollSensitivity]);
+    const endDrag = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', endDrag);
+        document.addEventListener('mouseleave', endDrag);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', endDrag);
+            document.removeEventListener('mouseleave', endDrag);
+        };
+    }, [isDragging, handleMouseMove, endDrag]);
+    useEffect(() => {
+        checkArrows();
+        const handleResize = () => checkArrows();
+        window.addEventListener('resize', handleResize);
+        if (containerRef.current && !resizeObserverRef.current) {
+            resizeObserverRef.current = new ResizeObserver(checkArrows);
+            resizeObserverRef.current.observe(containerRef.current);
+        }
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+        };
+    }, [checkArrows]);
+    const showDragCursor = enableDragScroll && isDesktop();
+    const cursorStyle = showDragCursor ? (isDragging ? 'grabbing' : 'grab') : undefined;
+    return (_jsx("div", { ref: containerRef, className: cn('efp-scrollable-row', className), role: "group", "aria-label": ariaLabel, children: _jsxs("div", { className: cn('efp-scrollable-row__container', {
+                [`efp-scrollable-row__container--${arrowPosition}`]: arrowPosition,
+            }), children: [showLeftArrow && (_jsx("button", { type: "button", className: cn('efp-scrollable-row__arrow', 'efp-scrollable-row__arrow--left', {
+                        'efp-scrollable-row__arrow--rtl': isRtl,
+                    }), onClick: () => scroll('left'), "aria-label": leftAriaLabel, children: _jsx("i", { className: "icon-chevron-left" }) })), _jsx("div", { ref: scrollRef, className: cn('efp-scrollable-row__scroll-wrapper', {
+                        'efp-scrollable-row__scroll-wrapper--dragging': isDragging,
+                    }), onScroll: handleScroll, onMouseDown: handleMouseDown, style: {
+                        cursor: cursorStyle,
+                        userSelect: isDragging ? 'none' : undefined,
+                    }, children: _jsx("div", { className: "efp-scrollable-row__content", children: children }) }), showRightArrow && (_jsx("button", { type: "button", className: cn('efp-scrollable-row__arrow', 'efp-scrollable-row__arrow--right', {
+                        'efp-scrollable-row__arrow--rtl': isRtl,
+                    }), onClick: () => scroll('right'), "aria-label": rightAriaLabel, children: _jsx("i", { className: "icon-chevron-right" }) }))] }) }));
+};
+export default ScrollableRow;

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

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

package/dist/components/ScrollableRow/index.js

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

package/dist/components/Share/Share.d.ts

@@ -0,0 +1,22 @@
+import './Share.scss';
+export type SocialNetwork = 'facebook' | 'xcom' | 'linkedin';
+export interface SocialLink {
+    network: SocialNetwork;
+    name: string;
+    url: string;
+    ariaLabel: string;
+}
+export interface ShareProps {
+    title: string;
+    url: string;
+    shareHeading: string;
+    socials: SocialLink[];
+    copyLinkSectionLabel: string;
+    directLinkAriaLabel: string;
+    copyButtonAriaLabel: string;
+    copyLabel: string;
+    copiedLabel: string;
+}
+declare const Share: ({ title, url, shareHeading, socials, copyLinkSectionLabel, directLinkAriaLabel, copyButtonAriaLabel, copyLabel, copiedLabel, }: ShareProps) => import("react").JSX.Element;
+export default Share;
+//# sourceMappingURL=Share.d.ts.map

package/dist/components/Share/Share.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Share.scss';
+import classNames from 'classnames';
+import copy from 'copy-to-clipboard';
+import { useEffect, useRef, useState } from 'react';
+const socialIconClass = {
+    facebook: 'icon-facebook',
+    xcom: 'icon-twitter-x',
+    linkedin: 'icon-linkedin',
+};
+const Share = ({ title, url, shareHeading, socials, copyLinkSectionLabel, directLinkAriaLabel, copyButtonAriaLabel, copyLabel, copiedLabel, }) => {
+    const [isCopied, setIsCopied] = useState(false);
+    const timerRef = useRef(undefined);
+    useEffect(() => () => clearTimeout(timerRef.current), []);
+    const copyToClipboard = () => {
+        if (!copy(url))
+            return;
+        setIsCopied(true);
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setIsCopied(false), 2000);
+    };
+    return (_jsxs("div", { className: "share", children: [_jsxs("h3", { children: [shareHeading, " ", title] }), _jsx("div", { className: "share__socials", children: socials.map((social) => (_jsxs("a", { href: social.url, rel: "noopener noreferrer", target: "_blank", className: classNames('share-social', social.network), "aria-label": social.ariaLabel, children: [_jsx("div", { className: "share-social__icon", children: _jsx("i", { className: socialIconClass[social.network], "aria-hidden": "true" }) }), _jsx("div", { className: "share-social__title", children: social.name })] }, social.network))) }), _jsxs("div", { className: "share__copy", children: [_jsx("span", { children: copyLinkSectionLabel }), _jsxs("div", { className: "share__copy-input", children: [_jsx("input", { type: "text", defaultValue: url, readOnly: true, "aria-label": directLinkAriaLabel }), _jsx("button", { type: "button", className: classNames({ isCopied }), onClick: copyToClipboard, "aria-label": copyButtonAriaLabel, children: isCopied ? _jsx("span", { "aria-live": "polite", children: copiedLabel }) : copyLabel })] })] })] }));
+};
+export default Share;

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

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

package/dist/components/Share/index.js

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

package/dist/components/ShowMoreButton/ShowMoreButton.d.ts

@@ -0,0 +1,11 @@
+import './ShowMoreButton.scss';
+import React from 'react';
+export interface ShowMoreButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-expanded' | 'type'> {
+    expanded: boolean;
+    showMoreLabel: string;
+    showLessLabel: string;
+    suffix?: React.ReactNode;
+}
+declare function ShowMoreButton({ expanded, showMoreLabel, showLessLabel, className, suffix, ...props }: ShowMoreButtonProps): React.JSX.Element;
+export default ShowMoreButton;
+//# sourceMappingURL=ShowMoreButton.d.ts.map

package/dist/components/ShowMoreButton/ShowMoreButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ShowMoreButton.scss';
+import classNames from 'classnames';
+function ShowMoreButton({ expanded, showMoreLabel, showLessLabel, className, suffix, ...props }) {
+    return (_jsxs("button", { ...props, type: "button", className: classNames('efp-show-more-button', { 'efp-show-more-button--expanded': expanded }, className), "aria-expanded": expanded, children: [_jsx("i", { className: "icon-chevron-down", "aria-hidden": "true" }), _jsx("span", { className: "efp-show-more-button__label", children: expanded ? showLessLabel : showMoreLabel }), suffix] }));
+}
+export default ShowMoreButton;

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

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

package/dist/components/ShowMoreButton/index.js

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

package/dist/components/SidebarActions/SidebarActions.d.ts

@@ -0,0 +1,26 @@
+import './SidebarActions.scss';
+export interface SidebarActionsProps {
+    className?: string;
+    inBookmark?: boolean;
+    visited?: boolean;
+    showVisited?: boolean;
+    showBookmark?: boolean;
+    showDirections?: boolean;
+    showRoutePlanner?: boolean;
+    showShare?: boolean;
+    directionsLabel: string;
+    visitedLabel: string;
+    notVisitedLabel: string;
+    saveBookmarkLabel: string;
+    removeBookmarkLabel: string;
+    routePlannerLabel: string;
+    shareLabel: string;
+    onClickBookmark?: () => void;
+    onClickVisited?: () => void;
+    onClickDirections?: () => void;
+    onClickRoutePlanner?: () => void;
+    onClickShare?: () => void;
+}
+declare const SidebarActions: ({ className, inBookmark, visited, showVisited, showBookmark, showDirections, showRoutePlanner, showShare, directionsLabel, visitedLabel, notVisitedLabel, saveBookmarkLabel, removeBookmarkLabel, routePlannerLabel, shareLabel, onClickBookmark, onClickVisited, onClickDirections, onClickRoutePlanner, onClickShare, }: SidebarActionsProps) => import("react").JSX.Element;
+export default SidebarActions;
+//# sourceMappingURL=SidebarActions.d.ts.map

package/dist/components/SidebarActions/SidebarActions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './SidebarActions.scss';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import CheckboxButton from '../CheckboxButton';
+const SidebarActions = ({ className, inBookmark = false, visited = false, showVisited = false, showBookmark = true, showDirections = true, showRoutePlanner = false, showShare = true, directionsLabel, visitedLabel, notVisitedLabel, saveBookmarkLabel, removeBookmarkLabel, routePlannerLabel, shareLabel, onClickBookmark, onClickVisited, onClickDirections, onClickRoutePlanner, onClickShare, }) => {
+    const [animateIcon, setAnimateIcon] = useState(false);
+    const animateTimeoutRef = useRef(undefined);
+    useEffect(() => {
+        return () => {
+            if (animateTimeoutRef.current !== undefined) {
+                clearTimeout(animateTimeoutRef.current);
+            }
+        };
+    }, []);
+    const handleBookmarkClick = () => {
+        clearTimeout(animateTimeoutRef.current);
+        setAnimateIcon(true);
+        onClickBookmark?.();
+        animateTimeoutRef.current = setTimeout(() => {
+            setAnimateIcon(false);
+        }, 320);
+    };
+    return (_jsxs("div", { className: classNames('efp-sidebar-actions', className), children: [showDirections && (_jsxs("button", { type: "button", className: "efp-action-button efp-action-button--directions", onClick: onClickDirections, title: directionsLabel, "aria-label": directionsLabel, children: [_jsx("i", { className: "icon-directions", "aria-hidden": "true" }), directionsLabel] })), showVisited && (_jsx(CheckboxButton, { className: "efp-visited-btn", ariaLabel: visited ? visitedLabel : notVisitedLabel, checked: visited, label: visitedLabel, onClick: onClickVisited ??
+                    (() => {
+                        /* no-op */
+                    }) })), showBookmark && (_jsx("button", { type: "button", className: classNames('efp-action-button', 'efp-action-button--bookmark', {
+                    'efp-action-button--active': inBookmark,
+                    'efp-action-button--animate': animateIcon,
+                }), title: inBookmark ? removeBookmarkLabel : saveBookmarkLabel, "aria-label": inBookmark ? removeBookmarkLabel : saveBookmarkLabel, "aria-pressed": inBookmark, onClick: handleBookmarkClick, children: _jsx("i", { className: inBookmark ? 'icon-bookmark-solid' : 'icon-bookmark', "aria-hidden": "true" }) })), showRoutePlanner && (_jsxs("button", { type: "button", className: "efp-action-button efp-action-button--route-planner", title: routePlannerLabel, "aria-label": routePlannerLabel, onClick: onClickRoutePlanner, children: [_jsx("i", { className: "icon-route-solid", "aria-hidden": "true" }), routePlannerLabel] })), showShare && (_jsx("button", { type: "button", className: "efp-action-button efp-action-button--share", title: shareLabel, "aria-label": shareLabel, onClick: onClickShare, children: _jsx("i", { className: "icon-share", "aria-hidden": "true" }) }))] }));
+};
+export default SidebarActions;

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

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

package/dist/components/SidebarActions/index.js

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

package/dist/components/SimpleRow/SimpleRow.d.ts

@@ -0,0 +1,15 @@
+import './SimpleRow.scss';
+import type { CSSProperties, ReactNode } from 'react';
+export interface SimpleRowProps {
+    title: ReactNode;
+    subtitle: string;
+    trailing?: string;
+    slug: string;
+    active?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    onClick: () => void;
+}
+declare const SimpleRow: ({ title, subtitle, trailing, slug, style, className, active, onClick, }: SimpleRowProps) => import("react").JSX.Element;
+export default SimpleRow;
+//# sourceMappingURL=SimpleRow.d.ts.map

package/dist/components/SimpleRow/SimpleRow.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './SimpleRow.scss';
+import classNames from 'classnames';
+const SimpleRow = ({ title, subtitle, trailing, slug, style, className, active = false, onClick, }) => {
+    const handleClick = (e) => {
+        e.preventDefault();
+        onClick();
+    };
+    return (_jsxs("a", { href: '?' + encodeURIComponent(slug), onClick: handleClick, className: classNames('efp-simple-row', { 'efp-simple-row--active': active }, className), style: style, children: [_jsxs("div", { className: "efp-simple-row__col", children: [_jsx("div", { className: "efp-simple-row__main", dir: "auto", children: title }), _jsx("div", { className: "efp-simple-row__sub", dir: "auto", children: subtitle })] }), trailing && _jsx("div", { className: "efp-simple-row__end", children: trailing })] }));
+};
+export default SimpleRow;

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

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

package/dist/components/SimpleRow/index.js

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

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import './Spinner.scss';
+import React from 'react';
+export interface SpinnerProps {
+    active: boolean;
+    isCenter?: boolean;
+}
+declare const Spinner: ({ active, isCenter }: SpinnerProps) => React.JSX.Element;
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import './Spinner.scss';
+import cn from 'classnames';
+const Spinner = ({ active, isCenter = false }) => {
+    return (_jsx("div", { className: cn('efp-spinner', { 'is-hidden': !active }), style: isCenter ? { top: 0, bottom: 0, left: 0, right: 0, margin: 'auto' } : undefined, children: _jsx("svg", { viewBox: "25 25 50 50", children: _jsx("circle", { r: "20", cy: "50", cx: "50" }) }) }));
+};
+export default Spinner;

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

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

package/dist/components/Spinner/index.js

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

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,17 @@
+import './ToggleButton.scss';
+import React from 'react';
+interface ToggleButtonBase {
+    toggled: boolean;
+    className?: string;
+    onClick: () => void;
+}
+export type ToggleButtonProps = (ToggleButtonBase & {
+    label: string;
+    ariaLabel?: string;
+}) | (ToggleButtonBase & {
+    label?: undefined;
+    ariaLabel: string;
+});
+declare const ToggleButton: ({ toggled, label, ariaLabel, className, onClick }: ToggleButtonProps) => React.JSX.Element;
+export default ToggleButton;
+//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './ToggleButton.scss';
+import cn from 'classnames';
+const ToggleButton = ({ toggled, label, ariaLabel, className, onClick }) => {
+    return (_jsxs("button", { type: "button", className: cn('efp-toggle-button', className, { 'efp-toggle-button--toggled': toggled }), "aria-pressed": toggled, "aria-label": ariaLabel, onClick: onClick, children: [_jsx("div", { className: "efp-toggle-button__switch", children: _jsx("div", { className: "efp-toggle-button__switch-slider" }) }), label && _jsx("span", { className: "efp-toggle-button__label", children: label })] }));
+};
+export default ToggleButton;

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

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

package/dist/components/ToggleButton/index.js

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

package/dist/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,12 @@
+import './ToggleSwitch.scss';
+import React from 'react';
+export interface ToggleSwitchProps {
+    name?: string;
+    value: boolean;
+    label: string;
+    className?: string;
+    onChange: (value: boolean) => void;
+}
+declare const ToggleSwitch: ({ name, value, label, className, onChange }: ToggleSwitchProps) => React.JSX.Element;
+export default ToggleSwitch;
+//# sourceMappingURL=ToggleSwitch.d.ts.map

package/dist/components/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './ToggleSwitch.scss';
+import classNames from 'classnames';
+import { useId } from 'react';
+const ToggleSwitch = ({ name, value, label, className, onChange }) => {
+    const id = useId();
+    return (_jsxs("div", { className: classNames('efp-toggle-switch', className), children: [_jsx("input", { type: "checkbox", role: "switch", "aria-checked": value, id: id, name: name, checked: value, onChange: () => onChange(!value) }), _jsx("label", { htmlFor: id, children: _jsx("span", { children: label }) })] }));
+};
+export default ToggleSwitch;

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

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

package/dist/components/ToggleSwitch/index.js

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

package/dist/components/TouchHand/TouchHand.d.ts

@@ -0,0 +1,5 @@
+import './TouchHand.scss';
+import React from 'react';
+declare const TouchHand: () => React.JSX.Element;
+export default TouchHand;
+//# sourceMappingURL=TouchHand.d.ts.map

package/dist/components/TouchHand/TouchHand.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './TouchHand.scss';
+const TouchHand = () => {
+    return (_jsx("div", { className: "efp-touch-hand", "aria-hidden": "true", children: _jsx("svg", { width: "640", height: "640", viewBox: "0 0 640 640", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "efp-touch-hand-icon", children: _jsxs("g", { className: "touchon", children: [_jsxs("g", { id: "touchon-body", children: [_jsx("circle", { className: "efp-hand-touch-1", cx: "299", cy: "201", r: "50" }), _jsx("circle", { className: "efp-hand-touch-2", cx: "299", cy: "201", r: "110" }), _jsx("circle", { className: "efp-hand-touch-3", cx: "299", cy: "201", r: "160" })] }), _jsxs("g", { id: "touchon-hand-body", children: [_jsx("path", { className: "efp-touchon-hand-fill", d: "M413.525 275.538C400.76 242.513 351.811 260.648 363.064 293.905L330.572 204.634C316.987 171.694 269.344 189.034 280.111 223L311.098 308.137L353.234 423.907C363.94 453.319 361.648 447.023 310.673 433.864C269.832 423.402 247.978 454.874 254.082 468.721C260.187 482.569 368.361 525.989 368.361 525.989C501.073 600.279 573.714 496.368 572.578 437.401C571.407 378.339 533.075 288.002 533.075 288.002C527.073 274.436 512.056 267.025 498.149 272.087C484.241 277.149 477.189 293.444 481.977 306.6L473.153 282.356C460.405 249.962 411.865 266.884 422.521 300.252L413.525 275.538Z" }), _jsx("path", { className: "efp-touchon-hand-stroke", d: "M363.064 293.905C351.811 260.648 400.76 242.513 413.525 275.538L422.521 300.252M363.064 293.905L330.572 204.634C316.987 171.694 269.344 189.034 280.111 223L311.098 308.137L353.234 423.907C363.94 453.319 361.648 447.023 310.673 433.864C269.832 423.402 247.978 454.874 254.082 468.721C260.187 482.569 368.361 525.989 368.361 525.989C501.073 600.279 573.714 496.368 572.578 437.401C571.407 378.339 533.075 288.002 533.075 288.002C527.073 274.436 512.056 267.025 498.149 272.087C484.241 277.149 477.189 293.444 481.977 306.6M363.064 293.905L390.46 369.174M422.521 300.252C411.865 266.884 460.405 249.962 473.153 282.356L481.977 306.6M422.521 300.252L440.921 350.807M481.977 306.6L494.974 342.308M363.064 293.905C351.811 260.648 400.76 242.513 413.525 275.538L422.521 300.252M363.064 293.905L330.572 204.634C316.987 171.694 269.344 189.034 280.111 223L311.098 308.137L353.234 423.907C363.94 453.319 361.648 447.023 310.673 433.864C269.832 423.402 247.978 454.874 254.082 468.721C260.187 482.569 368.361 525.989 368.361 525.989C501.073 600.279 573.714 496.368 572.578 437.401C571.407 378.339 533.075 288.002 533.075 288.002C527.073 274.436 512.056 267.025 498.149 272.087C484.241 277.149 477.189 293.444 481.977 306.6M363.064 293.905L390.46 369.174M422.521 300.252C411.865 266.884 460.405 249.962 473.153 282.356L481.977 306.6M422.521 300.252L440.921 350.807M481.977 306.6L494.974 342.308" })] })] }) }) }));
+};
+export default TouchHand;

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

@@ -0,0 +1,2 @@
+export { default } from './TouchHand';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TouchHand/index.js

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

package/dist/components/VenuePicker/VenuePicker.d.ts

@@ -0,0 +1,23 @@
+import './VenuePicker.scss';
+import type { SelectorOption } from '../../shared/selector-option.js';
+export interface VenuePickerLabels {
+    chooseVenue: string;
+    close: string;
+    currentVenue: string;
+    venueSelection: string;
+    viewAllVenues: string;
+}
+export interface VenuePickerProps {
+    venues: SelectorOption[];
+    labels: VenuePickerLabels;
+    renderTarget: HTMLElement | null;
+    onSelect: (id: string) => void;
+    onViewAllVenues: () => void;
+}
+/**
+ * Collapsed combobox naming the current venue, backed by a drawer holding the
+ * full list. At campus scale an expanded list crowds the map, so only the
+ * current context (or a prompt when there is none) stays on screen.
+ */
+export default function VenuePicker({ venues, labels, renderTarget, onSelect, onViewAllVenues, }: VenuePickerProps): import("react").JSX.Element | null;
+//# sourceMappingURL=VenuePicker.d.ts.map

package/dist/components/VenuePicker/VenuePicker.js

@@ -0,0 +1,70 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './VenuePicker.scss';
+import classNames from 'classnames';
+import { useRef, useState } from 'react';
+import Modal from '../Modal/Modal.js';
+/**
+ * Up to two uppercase letters standing in for a venue on the badge and drawer
+ * cards: the first letters of the first two words, or the first two letters of
+ * a single-word name. `Array.from` keeps multi-byte characters intact.
+ */
+function venueInitials(name) {
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return '?';
+    if (words.length === 1)
+        return Array.from(words[0]).slice(0, 2).join('').toUpperCase();
+    return (Array.from(words[0])[0] + Array.from(words[1])[0]).toUpperCase();
+}
+/**
+ * Collapsed combobox naming the current venue, backed by a drawer holding the
+ * full list. At campus scale an expanded list crowds the map, so only the
+ * current context (or a prompt when there is none) stays on screen.
+ */
+export default function VenuePicker({ venues, labels, renderTarget, onSelect, onViewAllVenues, }) {
+    const [chooserOpen, setChooserOpen] = useState(false);
+    const [chooserTabStopId, setChooserTabStopId] = useState(null);
+    const chooserCardRef = useRef(new Map());
+    const defaultChooserTabStopId = venues.find((venue) => venue.active && !venue.disabled)?.id ??
+        venues.find((venue) => !venue.disabled)?.id ??
+        null;
+    const focusAdjacentVenue = (event, currentVenueId) => {
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(event.key))
+            return;
+        event.preventDefault();
+        const direction = event.key === 'ArrowDown' || event.key === 'ArrowRight' ? 1 : -1;
+        const currentIndex = venues.findIndex((venue) => venue.id === currentVenueId);
+        for (let offset = 1; offset <= venues.length; offset++) {
+            const index = (currentIndex + direction * offset + venues.length) % venues.length;
+            if (venues[index].disabled)
+                continue;
+            setChooserTabStopId(venues[index].id);
+            chooserCardRef.current.get(venues[index].id)?.focus();
+            return;
+        }
+    };
+    // Closing the drawer returns focus to the trigger on its own (Modal restores
+    // the previously focused element), so venue entry only has to close it.
+    const selectVenue = (id) => {
+        setChooserOpen(false);
+        onSelect(id);
+    };
+    const viewAllVenues = () => {
+        setChooserOpen(false);
+        onViewAllVenues();
+    };
+    if (venues.length === 0)
+        return null;
+    const currentVenueLabel = venues.find((venue) => venue.active)?.label ?? null;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "efp-venue-picker", "aria-haspopup": "dialog", "aria-expanded": chooserOpen, "aria-label": currentVenueLabel ? `${labels.currentVenue}: ${currentVenueLabel}` : labels.chooseVenue, onClick: () => {
+                    setChooserTabStopId(defaultChooserTabStopId);
+                    setChooserOpen(true);
+                }, children: [_jsx("i", { className: "icon-layers", "aria-hidden": "true" }), _jsx("span", { dir: "auto", children: currentVenueLabel ?? labels.chooseVenue }), _jsx("i", { className: "icon-chevron-down", "aria-hidden": "true" })] }), _jsxs(Modal, { open: chooserOpen, variant: "drawer", className: "efp-venue-chooser", title: labels.chooseVenue, closeLabel: labels.close, renderTarget: renderTarget, onClose: () => setChooserOpen(false), children: [_jsx("div", { className: "efp-venue-chooser__list", role: "radiogroup", "aria-label": labels.venueSelection, children: venues.map((venue) => (_jsxs("button", { ref: (element) => {
+                                if (element)
+                                    chooserCardRef.current.set(venue.id, element);
+                                else
+                                    chooserCardRef.current.delete(venue.id);
+                            }, type: "button", className: classNames('efp-venue-chooser__card', {
+                                'is-active': venue.active,
+                            }), role: "radio", "aria-checked": venue.active, "aria-disabled": venue.disabled, disabled: venue.disabled, tabIndex: venue.id === (chooserTabStopId ?? defaultChooserTabStopId) ? 0 : -1, onFocus: () => setChooserTabStopId(venue.id), onKeyDown: (event) => focusAdjacentVenue(event, venue.id), onClick: () => selectVenue(venue.id), children: [_jsx("span", { className: "efp-venue-chooser__badge", "aria-hidden": "true", children: venueInitials(venue.label) }), _jsx("span", { className: "efp-venue-chooser__card-name", dir: "auto", children: venue.label })] }, venue.id))) }), _jsxs("button", { type: "button", className: "efp-venue-chooser__view-all", onClick: viewAllVenues, children: [_jsx("i", { className: "icon-zoom-out", "aria-hidden": "true" }), _jsx("span", { children: labels.viewAllVenues })] })] })] }));
+}

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

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

package/dist/components/VenuePicker/index.js

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

package/dist/components/WayfindingFloorSelector/WayfindingFloorSelector.d.ts

@@ -0,0 +1,24 @@
+import './WayfindingFloorSelector.scss';
+import React from 'react';
+export interface WayfindingFloorSelectorFloor {
+    id: number;
+    name: string;
+    description?: string;
+    directionToNext?: 'up' | 'down';
+    ariaLabel?: string;
+}
+export interface WayfindingFloorSelectorProps {
+    floors: WayfindingFloorSelectorFloor[];
+    value?: {
+        id: number;
+        name: string;
+    };
+    floorSelectionLabel?: string;
+    onSelect?: (floor: {
+        id: number;
+        name: string;
+    }) => void;
+}
+declare const WayfindingFloorSelector: ({ floors, value, floorSelectionLabel, onSelect, }: WayfindingFloorSelectorProps) => React.JSX.Element;
+export default WayfindingFloorSelector;
+//# sourceMappingURL=WayfindingFloorSelector.d.ts.map