@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Molecules/Modal/Modal.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState, useEffect } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useClickOutside } from '../../../hooks';
+import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useA11y } from '../../../hooks/useA11y';
+import { Overlay } from '../../Atoms/Overlay';
+import { debounce } from '@athoscommerce/snap-toolbox';
+const defaultStyles = () => {
+    return css({
+        position: 'relative',
+        '&.ss__modal--open': {
+            '& .ss__modal__content': {
+                visibility: 'visible',
+                opacity: 1,
+            },
+        },
+        '&.ss__modal--disabled': {
+            '& .ss__modal__button': {
+                cursor: 'initial',
+            },
+        },
+        '.ss__modal__button': {
+            cursor: 'pointer',
+        },
+        '.ss__modal__content': {
+            backgroundColor: '#fff',
+            position: 'absolute',
+            minWidth: '100%',
+            visibility: 'hidden',
+            opacity: 0,
+            top: 'auto',
+            left: 0,
+            zIndex: 10004,
+        },
+    });
+};
+export const Modal = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        startOpen: false,
+        disableA11y: false,
+        lockScroll: true,
+        overlayColor: 'rgba(0,0,0,0.8)',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('modal', globalTheme, defaultProps, properties);
+    const { button, content, buttonSelector, children, disabled, open, onClick, lockScroll, startOpen, disableClickOutside, disableA11y, className, internalClassName, disableStyles, overlayColor, onOverlayClick, treePath, } = props;
+    const subProps = {
+        overlay: {
+            // default props
+            internalClassName: 'ss__modal__overlay',
+            onClick: (e) => {
+                onOverlayClick && onOverlayClick(e);
+                toggleShowContent();
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+                color: overlayColor,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    let showContent, setShowContent;
+    const stateful = open === undefined;
+    if (stateful) {
+        [showContent, setShowContent] = useState(startOpen);
+    }
+    else {
+        showContent = open;
+    }
+    let innerRef;
+    if (!disableClickOutside) {
+        innerRef = useClickOutside(() => {
+            if (showContent) {
+                if (!disabled) {
+                    stateful && setShowContent && setShowContent(false);
+                }
+            }
+        });
+    }
+    const toggleShowContent = () => {
+        if (stateful) {
+            setShowContent &&
+                setShowContent((prev) => {
+                    return !prev;
+                });
+        }
+        // overflow will be handled by useEffect below
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    // Effect to lock/unlock scroll when modal opens/closes
+    useEffect(() => {
+        if (showContent && lockScroll) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [showContent, lockScroll]);
+    useEffect(() => {
+        const existingButton = buttonSelector ? (typeof buttonSelector === 'string' ? document.querySelector(buttonSelector) : buttonSelector) : null;
+        const debouncedHandleResize = debounce(() => {
+            setTimeout(() => {
+                if (showContent && lockScroll) {
+                    document.body.style.overflow = 'hidden';
+                }
+                else {
+                    document.body.style.overflow = '';
+                }
+            }, 100);
+        }, 10);
+        const clickListener = (e) => {
+            toggleShowContent();
+            onClick && onClick(e);
+        };
+        if (existingButton) {
+            if (!disabled) {
+                existingButton.addEventListener('click', clickListener);
+            }
+        }
+        window.addEventListener('resize', debouncedHandleResize);
+        return () => {
+            window.removeEventListener('resize', debouncedHandleResize);
+            if (existingButton) {
+                existingButton.removeEventListener('click', clickListener);
+            }
+        };
+    }, []);
+    return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__modal', { 'ss__modal--open': showContent }, { 'ss__modal--disabled': disabled }, className, internalClassName), ref: innerRef, children: [!buttonSelector && button && (_jsx("div", { className: "ss__modal__button", ref: (e) => (!disableA11y ? useA11y(e) : null), "aria-expanded": showContent, role: "button", onClick: (e) => {
+                        if (!disabled) {
+                            toggleShowContent();
+                            onClick && onClick(e);
+                        }
+                    }, children: cloneWithProps(button, { open: showContent, toggleOpen: toggleShowContent, treePath }) })), (content || children) && showContent && (_jsxs("div", { className: `ss__modal__content`, ref: (e) => (!disableA11y ? useA11y(e) : null), children: [cloneWithProps(content, { open: showContent, toggleOpen: toggleShowContent, treePath }), cloneWithProps(children, { open: showContent, toggleOpen: toggleShowContent, treePath })] })), _jsx(Overlay, { ...subProps.overlay, active: Boolean(showContent) })] }) }));
+});

package/dist/esm/components/src/components/Molecules/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Modal';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/esm/components/src/components/Molecules/Modal/index.js

@@ -0,0 +1 @@
+export * from './Modal';

package/dist/esm/components/src/components/Molecules/OverlayBadge/OverlayBadge.d.ts

@@ -0,0 +1,18 @@
+import { ComponentChildren } from 'preact';
+import { ComponentProps, ComponentMap } from '../../../types';
+import type { AutocompleteController, RecommendationController, SearchController } from '@athoscommerce/snap-controller';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+export declare const OverlayBadge: ((properties: OverlayBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type OverlayBadgeProps = {
+    result: Product;
+    controller: SearchController | AutocompleteController | RecommendationController;
+} & OverlayBadgeTemplatesLegalProps & ComponentProps<OverlayBadgeProps>;
+export type OverlayBadgeTemplatesLegalProps = {
+    renderEmpty?: boolean;
+    limit?: number;
+    children: ComponentChildren;
+    componentMap?: ComponentMap;
+};
+//# sourceMappingURL=OverlayBadge.d.ts.map

package/dist/esm/components/src/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAuD9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAiGjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CACjF,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC"}

package/dist/esm/components/src/components/Molecules/OverlayBadge/OverlayBadge.js

@@ -0,0 +1,118 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useSnap, useTreePath } from '../../../providers';
+import { defaultBadgeComponentMap, mergeProps, mergeStyles } from '../../../utilities';
+import { useComponent } from '../../../hooks';
+const defaultBadgeStyles = ({ section, top, bottom, index, tag, }) => {
+    return css({
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: section == 'right' ? 'flex-end' : 'flex-start',
+        justifyContent: !top && !bottom ? 'center' : bottom && !top ? 'flex-end' : 'flex-start',
+        gap: '0.5em',
+        gridArea: tag,
+        boxSizing: 'border-box',
+        zIndex: Math.max(100 - index, 1),
+        width: '100%',
+        height: '100%',
+    });
+};
+const defaultStyles = ({ controller }) => {
+    const group = 'overlay';
+    const grid = controller?.store?.meta?.badges?.groups?.[group]?.grid;
+    let gridProperties = {};
+    if (grid?.length && grid[0]?.length) {
+        const gridTemplateAreas = grid.map((row) => `"${row.join(' ')}"`).join(' ');
+        const columns = grid[0].length;
+        gridProperties = {
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gridTemplateRows: `repeat(${grid.length}, minmax(0, 1fr))`,
+            gridTemplateAreas,
+        };
+    }
+    return css({
+        position: 'relative',
+        '& .ss__overlay-badge__grid-wrapper': {
+            pointerEvents: 'none',
+            display: 'grid',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            ...gridProperties,
+        },
+    });
+};
+export const OverlayBadge = observer((properties) => {
+    const globalTheme = useTheme();
+    const snap = useSnap();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        limit: 1,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('overlayBadge', globalTheme, defaultProps, properties);
+    const { result, children, controller, renderEmpty, limit, className, internalClassName, treePath } = props;
+    if (!children) {
+        controller?.log?.warn('OverlayBadge component must have children');
+        return null;
+    }
+    const meta = controller?.store?.meta;
+    if (!meta) {
+        controller?.log?.warn('Controller must have a meta store');
+        return _jsx(_Fragment, { children: children });
+    }
+    const group = 'overlay';
+    const badgeComponentMap = {
+        ...defaultBadgeComponentMap,
+        ...(snap?.templates?.library.import.component.badge || {}),
+        ...props.componentMap,
+    };
+    const sections = meta?.badges?.groups?.[group]?.sections;
+    // build locations and filter out the locations that have no badges in them to prevent rendering
+    const locations = sections
+        ?.map((section) => {
+        const sectionSlots = meta?.data?.badges?.locations[section];
+        const slots = sectionSlots
+            ?.map((slot, index) => ({
+            tag: slot.tag,
+            name: slot.name,
+            top: index == 0,
+            bottom: index == sectionSlots.length - 1,
+            badges: result?.display.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
+        }))
+            .filter((slot) => slot.badges?.length);
+        return {
+            section,
+            slots,
+        };
+    })
+        .filter((location) => location.slots?.length);
+    const styling = mergeStyles(props, defaultStyles);
+    if (renderEmpty || locations?.length) {
+        return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__overlay-badge', className, internalClassName), children: [_jsx("div", { className: "ss__overlay-badge__grid-wrapper", children: locations.map((location, index) => {
+                            return location.slots?.map((slot) => {
+                                const badgeStyles = defaultBadgeStyles({
+                                    ...props,
+                                    tag: slot.tag,
+                                    section: location.section,
+                                    index,
+                                    top: slot.top,
+                                    bottom: slot.bottom,
+                                });
+                                return (_jsx("div", { className: classnames('ss__overlay-badge__grid-wrapper__slot', `ss__overlay-badge__grid-wrapper__slot--${slot.tag}`), css: [badgeStyles], children: slot.badges.map((badge) => {
+                                        const BadgeComponent = useComponent(badgeComponentMap, badge.component);
+                                        if (!BadgeComponent) {
+                                            return null;
+                                        }
+                                        return _jsx(BadgeComponent, { ...badge, ...badge.parameters, treePath: treePath });
+                                    }) }));
+                            });
+                        }) }), children] }) }));
+    }
+    return _jsx(_Fragment, { children: children });
+});

package/dist/esm/components/src/components/Molecules/OverlayBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OverlayBadge';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/OverlayBadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/src/components/Molecules/OverlayBadge/index.js

@@ -0,0 +1 @@
+export * from './OverlayBadge';

package/dist/esm/components/src/components/Molecules/Pagination/Pagination.d.ts

@@ -0,0 +1,47 @@
+import { ComponentProps } from '../../../types';
+import type { SearchPaginationStore, Page } from '@athoscommerce/snap-store-mobx';
+import type { SearchController } from '@athoscommerce/snap-controller';
+import { Lang } from '../../../hooks';
+export declare const Pagination: ((properties: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type PaginationProps = {
+    pagination?: SearchPaginationStore;
+    controller?: SearchController;
+    lang?: Partial<PaginationLang>;
+} & PaginationTemplatesLegalProps & ComponentProps<PaginationProps>;
+export type PaginationTemplatesLegalProps = {
+    pages?: number;
+    pagesLeft?: number;
+    pagesRight?: number;
+    hideFirst?: boolean;
+    hideLast?: boolean;
+    hideEllipsis?: boolean;
+    hideNext?: boolean;
+    hidePrev?: boolean;
+    nextButton?: string | JSX.Element;
+    prevButton?: string | JSX.Element;
+    firstButton?: string | JSX.Element;
+    lastButton?: string | JSX.Element;
+    persistFirst?: boolean;
+    persistLast?: boolean;
+};
+export interface PaginationLang {
+    previous: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+    next: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+    first: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+    last: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+    page: Lang<{
+        pagination: SearchPaginationStore;
+        page: Page;
+    }>;
+}
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/esm/components/src/components/Molecules/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Pagination/Pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAkB/C,eAAO,MAAM,UAAU,gBAAyB,eAAe;;CAuK7D,CAAC;AAMH,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B,GAAG,6BAA6B,GAChC,cAAc,CAAC,eAAe,CAAC,CAAC;AAEjC,MAAM,MAAM,6BAA6B,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,IAAI,CAAC;QACd,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,KAAK,EAAE,IAAI,CAAC;QACX,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,IAAI,EAAE,IAAI,CAAC;QACV,UAAU,EAAE,qBAAqB,CAAC;QAClC,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/Pagination/Pagination.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Icon } from '../../Atoms/Icon';
+import deepmerge from 'deepmerge';
+import { useLang } from '../../../hooks';
+const defaultStyles = () => {
+    return css({
+        '& .ss__pagination__page': {
+            padding: '5px',
+            display: 'inline-block',
+            minHeight: '1em',
+            minWidth: '1em',
+            textAlign: 'center',
+            '&.ss__pagination__page--active': {
+                fontWeight: 'bold',
+            },
+            '&:hover:not(.ss__pagination__page--active)': {},
+        },
+    });
+};
+export const Pagination = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        pages: 5,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('pagination', globalTheme, defaultProps, properties);
+    const { pagination, controller, pages, pagesLeft, pagesRight, hideFirst, hideLast, persistFirst, persistLast, hideEllipsis, hideNext, hidePrev, nextButton, prevButton, firstButton, lastButton, disableStyles, className, internalClassName, treePath, } = props;
+    const subProps = {
+        icon: {
+            // default props
+            internalClassName: 'ss__pagination__icon',
+            size: '10px',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const store = pagination || controller?.store?.pagination;
+    const getPagesParams = Number.isInteger(pagesLeft) && Number.isInteger(pagesRight) ? [pagesLeft, pagesRight] : [pages];
+    const _pages = store?.getPages(...getPagesParams);
+    const pageNumbers = _pages?.map((page) => page.number);
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        previous: {
+            attributes: {
+                'aria-label': 'go to previous page',
+            },
+        },
+        next: {
+            attributes: {
+                'aria-label': 'go to next page',
+            },
+        },
+        first: {
+            attributes: {
+                'aria-label': 'go to first page',
+            },
+        },
+        last: {
+            attributes: {
+                'aria-label': `go to last page ${store?.last.number}`,
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        pagination: store,
+    });
+    return pageNumbers && pageNumbers.length > 1 && store?.totalResults ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__pagination', className, internalClassName), children: _jsxs("nav", { role: "navigation", "aria-label": "Pagination", children: [store.previous && !hidePrev && (_jsx("a", { ...store.previous.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--previous'), ...mergedLang.previous?.all, children: prevButton ? prevButton : _jsx(Icon, { ...subProps.icon, icon: 'angle-left', name: 'prev' }) })), (!pageNumbers.includes(store.first.number) || (persistFirst && store.page !== store.first.number)) && !hideFirst && (_jsxs(_Fragment, { children: [_jsx("a", { ...store.first.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--first'), ...mergedLang.first?.all, children: firstButton ? firstButton : store.first.number }), !pageNumbers.includes(2) && !hideEllipsis && _jsx("span", { children: "\u2026" })] })), _pages &&
+                        _pages.map((page) => {
+                            //initialize lang
+                            const defaultPageLang = {
+                                page: {
+                                    attributes: {
+                                        'aria-label': `go to page ${page.number}`,
+                                    },
+                                },
+                            };
+                            //deep merge with props.lang
+                            const pagelang = deepmerge(defaultPageLang, props.lang || {});
+                            const mergedPageLang = useLang(pagelang, {
+                                pagination: store,
+                                page: page,
+                            });
+                            return page.active ? (_jsx("span", { className: classnames('ss__pagination__page', 'ss__pagination__page--active'), ...mergedPageLang.page?.all, "aria-current": "true", "aria-live": "polite", children: page.number })) : (_jsx("a", { ...page.url.link, className: "ss__pagination__page", ...mergedPageLang.page?.all, children: page.number }));
+                        }), (!pageNumbers.includes(store.last.number) || (persistLast && store.page !== store.last.number)) && !hideLast && (_jsxs(_Fragment, { children: [!pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && _jsx("span", { children: "\u2026" }), _jsx("a", { ...store.last.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--last'), ...mergedLang.last?.all, children: lastButton ? lastButton : store.last.number })] })), store.next && !hideNext && (_jsx("a", { ...store.next.url.link, className: classnames('ss__pagination__page', 'ss__pagination__page--next'), ...mergedLang.next?.all, children: nextButton ? nextButton : _jsx(Icon, { ...subProps.icon, icon: 'angle-right', name: 'next' }) }))] }) }) })) : null;
+});

package/dist/esm/components/src/components/Molecules/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Pagination';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/Pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/esm/components/src/components/Molecules/Pagination/index.js

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/esm/components/src/components/Molecules/PerPage/PerPage.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ListOption } from '../../../types';
+import { SearchPaginationStore } from '@athoscommerce/snap-store-mobx';
+import type { SearchController } from '@athoscommerce/snap-controller';
+import { Lang } from '../../../hooks';
+export declare const PerPage: ((properties: PerPageProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type PerPageProps = {
+    pagination?: SearchPaginationStore;
+    controller?: SearchController;
+    lang?: Partial<PerPageLang>;
+} & PerPageTemplatesLegalProps & ComponentProps<PerPageProps>;
+export type PerPageTemplatesLegalProps = {
+    label?: string;
+    type?: 'dropdown' | 'list' | 'radio';
+};
+export interface PerPageLang {
+    label: Lang<{
+        options: ListOption[];
+        selectedOptions: ListOption[];
+    }>;
+}
+//# sourceMappingURL=PerPage.d.ts.map

package/dist/esm/components/src/components/Molecules/PerPage/PerPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerPage.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/PerPage/PerPage.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAIvE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAWtC,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAuHvD,CAAC;AAQH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,IAAI,CAAC;QACX,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,eAAe,EAAE,UAAU,EAAE,CAAC;KAC9B,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Molecules/PerPage/PerPage.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Select } from '../Select';
+import { RadioList } from '../RadioList';
+import { List } from '../List';
+import deepmerge from 'deepmerge';
+const defaultStyles = () => {
+    return css({
+        '.ss__button__content': {
+            display: 'flex',
+            alignItems: 'center',
+        },
+    });
+};
+export const PerPage = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        label: 'Per Page',
+        type: 'dropdown',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('perPage', globalTheme, defaultProps, properties);
+    const { pagination, type, controller, label, disableStyles, className, internalClassName, treePath } = props;
+    const store = pagination || controller?.store?.pagination;
+    const subProps = {
+        select: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        RadioList: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        List: {
+            multiSelect: false,
+            hideOptionCheckboxes: true,
+            horizontal: true,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const selectedOption = store && store?.pageSizeOptions?.find((option) => option.value == store?.pageSize);
+    //initialize lang
+    const defaultLang = {
+        label: {
+            value: label,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    // options can be an Array or ObservableArray - but should have length
+    return store?.pageSize && typeof store?.pageSizeOptions == 'object' && store.pageSizeOptions?.length ? (_jsxs(CacheProvider, { children: [type?.toLowerCase() == 'dropdown' && (_jsx(Select, { ...styling, className: classnames('ss__per-page', 'ss__per-page__select', className, internalClassName), ...subProps.select, label: label, options: store.pageSizeOptions, selected: selectedOption, onSelect: (e, option) => {
+                    store.setPageSize(+option.value);
+                }, lang: {
+                    buttonLabel: lang.label,
+                } })), type?.toLowerCase() == 'list' && (_jsx(List, { ...styling, className: classnames('ss__per-page', 'ss__per-page__list', className, internalClassName), ...subProps.List, onSelect: (e, option) => {
+                    store.setPageSize(+option.value);
+                }, requireSelection: true, options: store.pageSizeOptions, selected: store.pageSizeOption, titleText: label, lang: {
+                    title: lang.label,
+                } })), type?.toLowerCase() == 'radio' && (_jsx(RadioList, { ...styling, className: classnames('ss__per-page', 'ss__per-page__radioList', className, internalClassName), ...subProps.RadioList, onSelect: (e, option) => {
+                    store.setPageSize(+option.value);
+                }, options: store.pageSizeOptions, selected: store.pageSizeOption, titleText: label, lang: {
+                    title: lang.label,
+                } }))] })) : null;
+});

package/dist/esm/components/src/components/Molecules/PerPage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PerPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/PerPage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/PerPage/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/esm/components/src/components/Molecules/PerPage/index.js

@@ -0,0 +1 @@
+export * from './PerPage';

package/dist/esm/components/src/components/Molecules/Radio/Radio.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps } from '../../../types';
+import { IconProps, IconType } from '../../Atoms/Icon';
+import { Lang } from '../../../hooks';
+export declare const Radio: ((properties: RadioProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type RadioProps = {
+    lang?: Partial<RadioLang>;
+} & RadioTemplatesLegalProps & ComponentProps<RadioProps>;
+export type RadioTemplatesLegalProps = {
+    checked?: boolean;
+    color?: string;
+    disabled?: boolean;
+    checkedIcon?: IconType | Partial<IconProps>;
+    unCheckedIcon?: IconType | Partial<IconProps>;
+    onClick?: (e: React.MouseEvent<HTMLInputElement | HTMLSpanElement, MouseEvent>) => void;
+    size?: string;
+    startChecked?: boolean;
+    native?: boolean;
+    disableA11y?: boolean;
+};
+export interface RadioLang {
+    radio: Lang<{
+        disabled: boolean;
+        checkedState: boolean;
+    }>;
+}
+//# sourceMappingURL=Radio.d.ts.map

package/dist/esm/components/src/components/Molecules/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Radio/Radio.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAuB/C,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAgJnD,CAAC;AAOH,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;CAC1B,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,IAAI,CAAC;QACX,QAAQ,EAAE,OAAO,CAAC;QAClB,YAAY,EAAE,OAAO,CAAC;KACtB,CAAC,CAAC;CACH"}