@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useRanger } from 'react-ranger';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { sprintf } from '../../../utilities';
+import { useA11y, useLang } from '../../../hooks';
+import deepmerge from 'deepmerge';
+const defaultStyles = ({ railColor, trackColor, handleColor, valueTextColor, handleDraggingColor, showTicks, stickyHandleLabel, tickTextColor, theme, }) => {
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: '5px',
+        marginBottom: showTicks && stickyHandleLabel ? '20px' : showTicks || stickyHandleLabel ? '10px' : '5px',
+        '& .ss__facet-slider__slider': {
+            position: 'relative',
+            display: 'inline-block',
+            height: '8px',
+            width: 'calc(100% - 2rem)',
+            margin: stickyHandleLabel ? '1rem' : '0 1rem',
+            top: '10px',
+        },
+        '& .ss__facet-slider__tick': {
+            '&:before': {
+                content: "''",
+                position: 'absolute',
+                left: '0',
+                background: 'rgba(0, 0, 0, 0.2)',
+                height: '5px',
+                width: '2px',
+                transform: 'translate(-50%, 0.7rem)',
+            },
+            '& .ss__facet-slider__tick__label': {
+                position: 'absolute',
+                fontSize: '0.6rem',
+                color: tickTextColor,
+                top: '100%',
+                transform: 'translate(-50%, 1.2rem)',
+                whiteSpace: 'nowrap',
+            },
+        },
+        '& .ss__facet-slider__rail': {
+            background: railColor || theme?.variables?.colors?.primary || '#333',
+            height: '100%',
+        },
+        '& .ss__facet-slider__segment': {
+            background: trackColor || theme?.variables?.colors?.secondary || '#ccc',
+            height: '100%',
+        },
+        '& .ss__facet-slider__handles': {
+            textAlign: 'center',
+            '& button': {
+                '& .ss__facet-slider__handle': {
+                    background: handleColor || theme?.variables?.colors?.primary || '#333',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '1.6rem',
+                    height: '1.6rem',
+                    borderRadius: '100%',
+                    fontSize: '0.7rem',
+                    whiteSpace: 'nowrap',
+                    color: valueTextColor || 'initial',
+                    fontWeight: 'normal',
+                    transform: 'translateY(0) scale(0.9)',
+                    transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                    position: 'relative',
+                    cursor: 'pointer',
+                    '&:after': {
+                        backgroundColor: '#ffffff',
+                        width: '30%',
+                        height: '30%',
+                        top: '0',
+                        bottom: '0',
+                        left: '0',
+                        content: '""',
+                        position: 'absolute',
+                        right: '0',
+                        borderRadius: '12px',
+                        margin: 'auto',
+                        cursor: 'pointer',
+                    },
+                    '&.ss__facet-slider__handle--active': {
+                        background: handleDraggingColor || handleColor || theme?.variables?.colors?.primary || '#000',
+                        '& label.ss__facet-slider__handle__label': {
+                            background: '#fff',
+                            padding: '0 5px',
+                        },
+                    },
+                    '& label.ss__facet-slider__handle__label': {
+                        display: 'inline-block',
+                        marginTop: showTicks && !stickyHandleLabel ? '35px' : '20px',
+                        '&.ss__facet-slider__handle__label--pinleft': {
+                            left: '0px',
+                        },
+                        '&.ss__facet-slider__handle__label--pinright': {
+                            right: '0px',
+                        },
+                        '&.ss__facet-slider__handle__label--sticky': {
+                            position: 'absolute',
+                            top: '-20px',
+                            fontFamily: 'Roboto, Helvetica, Arial',
+                            fontSize: '14px',
+                            marginTop: '0px',
+                        },
+                    },
+                },
+            },
+        },
+        '& .ss__facet-slider__labels': {
+            textAlign: 'center',
+            marginTop: showTicks && !stickyHandleLabel ? '40px' : '20px',
+            color: valueTextColor,
+            '& .ss__facet-slider__label--0': {
+                '&:after': {
+                    content: '"-"',
+                    padding: '5px',
+                },
+            },
+        },
+    });
+};
+export const FacetSlider = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        tickSize: properties.facet?.step ? properties.facet?.step * 10 : 20,
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('facetSlider', globalTheme, defaultProps, properties);
+    const { showTicks, facet, stickyHandleLabel, separateHandles, onChange, onDrag, className, internalClassName } = props;
+    let { tickSize } = props;
+    if (isNaN(Number(tickSize)) || Number(tickSize) <= 0) {
+        // fallback to default (causes chrome to crash)
+        tickSize = properties.facet?.step ? properties.facet?.step * 10 : 20;
+    }
+    else {
+        tickSize = Number(tickSize);
+    }
+    const [values, setValues] = useState([facet.active?.low, facet.active?.high]);
+    const [active, setActive] = useState([facet.active?.low, facet.active?.high]);
+    // Helper function to ensure min and max values are not equal
+    const ensureValueSeparation = (val) => {
+        if (!separateHandles || !facet.step) {
+            return val;
+        }
+        const [minVal, maxVal] = val;
+        const rangeMin = facet.range?.low;
+        const rangeMax = facet.range?.high;
+        const step = facet.step;
+        // If values are equal, separate them by one step
+        if (minVal === maxVal) {
+            // Determine which value to adjust based on range boundaries
+            if (maxVal + step <= rangeMax) {
+                // Prefer to increase max if possible
+                return [minVal, maxVal + step];
+            }
+            else if (minVal - step >= rangeMin) {
+                // Otherwise, decrease min if possible
+                return [minVal - step, maxVal];
+            }
+            else {
+                // If neither is possible (range too small), return original
+                return val;
+            }
+        }
+        return val;
+    };
+    if (((facet.active?.low || facet.active?.low === 0) && facet.active?.high && values[0] != facet.active?.low) || values[1] != facet.active?.high) {
+        setActive([facet.active?.low, facet.active?.high]);
+        setValues([facet.active?.low, facet.active?.high]);
+    }
+    const { getTrackProps, ticks, segments, handles } = useRanger({
+        values: active,
+        onChange: (val) => {
+            const adjustedVal = ensureValueSeparation(val);
+            setActive(adjustedVal);
+            // onChange called prior to urlManager changes to allow for mutation in function
+            onChange && onChange(adjustedVal);
+            if (facet?.services?.urlManager) {
+                if (adjustedVal[0] == facet.range.low && adjustedVal[1] == facet.range.high) {
+                    facet.services.urlManager.remove('page').remove(`filter.${facet.field}`).go();
+                }
+                else {
+                    facet.services.urlManager.remove('page').set(`filter.${facet.field}`, { low: adjustedVal[0], high: adjustedVal[1] }).go();
+                }
+            }
+            onChange && onChange(val);
+        },
+        onDrag: (val) => {
+            const adjustedVal = ensureValueSeparation(val);
+            setActive(adjustedVal);
+            onDrag && onDrag(adjustedVal);
+        },
+        min: facet.range?.low,
+        max: facet.range?.high,
+        stepSize: facet.step,
+        tickSize: tickSize,
+    });
+    const styling = mergeStyles(props, defaultStyles);
+    return facet.range && facet.active && facet.step ? (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__facet-slider', className, internalClassName), ...getTrackProps(), ...styling, children: [_jsxs("div", { className: "ss__facet-slider__slider", children: [showTicks &&
+                            ticks.map(({ value, getTickProps }) => (_jsx("div", { className: "ss__facet-slider__tick", ...getTickProps(), children: _jsx("div", { className: "ss__facet-slider__tick__label", children: value }) }))), segments.map(({ getSegmentProps }, idx) => (_jsx("div", { className: `${idx === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment'}`, ...getSegmentProps() }))), _jsx("div", { className: 'ss__facet-slider__handles', children: handles.map(({ value, active, getHandleProps }, idx) => {
+                                //initialize lang
+                                const defaultLang = {
+                                    sliderHandle: {
+                                        attributes: {
+                                            'aria-label': `${facet.label} button, current value ${value}, ${facet.range?.low ? `min value ${facet.range?.low},` : ``} ${facet.range?.high ? `max value ${facet.range?.high}` : ``}`,
+                                        },
+                                    },
+                                };
+                                //deep merge with props.lang
+                                const lang = deepmerge(defaultLang, props.lang || {});
+                                const mergedLang = useLang(lang, {
+                                    facet,
+                                    value,
+                                });
+                                return (_jsx("button", { type: "button", ...getHandleProps({
+                                        style: {
+                                            appearance: 'none',
+                                            border: 'none',
+                                            background: 'transparent',
+                                            outline: 'none',
+                                        },
+                                    }), ...mergedLang.sliderHandle?.all, ref: (e) => useA11y(e), children: _jsx("div", { className: classnames('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }), children: stickyHandleLabel && (_jsx("label", { className: classnames('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', `ss__facet-slider__handle__label--${idx}`, { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == facet?.range?.low }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == facet?.range?.high }), children: sprintf(facet.formatValue, value) })) }) }));
+                            }) })] }), !stickyHandleLabel && (_jsx("div", { className: 'ss__facet-slider__labels', children: handles.map(({ value }, idx) => (_jsx("label", { className: classnames('ss__facet-slider__label', `ss__facet-slider__label--${idx}`), children: sprintf(facet.formatValue, value) }))) }))] }) })) : null;
+});

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { ComponentProps } from '../../../types';
+import { IconProps, IconType } from '../../Atoms/Icon';
+import type { Filter as FilterType } from '@athoscommerce/snap-store-mobx';
+import type { UrlManager } from '@athoscommerce/snap-url-manager';
+import { Lang } from '../../../hooks';
+export declare const Filter: ((properties: FilterProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type FilterProps = {
+    lang?: Partial<FilterLang>;
+    filter?: FilterType;
+    url?: UrlManager;
+} & FilterTemplatesLegalProps & ComponentProps<FilterProps>;
+export type FilterTemplatesLegalProps = {
+    facetLabel?: string;
+    valueLabel?: string;
+    hideFacetLabel?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    icon?: IconType | Partial<IconProps>;
+    separator?: string;
+};
+export interface FilterLang {
+    filter: Lang<{
+        label?: string;
+        value?: string;
+    }>;
+}
+export type FilterNames = 'clear-all';
+//# sourceMappingURL=Filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Filter/Filter.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAsB/C,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAyFrD,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,GAAG,CAAC,EAAE,UAAU,CAAC;CACjB,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACvE,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,MAAM,EAAE,IAAI,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACH;AAOD,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC"}

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

@@ -0,0 +1,87 @@
+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 { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { Button } from '../../Atoms/Button';
+import { Icon } from '../../Atoms/Icon';
+import { useLang } from '../../../hooks';
+import deepmerge from 'deepmerge';
+const defaultStyles = ({}) => {
+    return css({
+        textDecoration: 'none',
+        display: 'inline-flex',
+        '& .ss__filter__button': {
+            alignItems: 'center',
+            '& .ss__filter__button__icon': {
+                margin: '0 5px 0 0',
+            },
+        },
+        '& .ss__filter__label': {
+            marginRight: '5px',
+            marginLeft: '5px',
+            fontWeight: 'bold',
+        },
+    });
+};
+// TODO: look into urlManager and how it connects in this case, left the href out for the time being
+export const Filter = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('filter', globalTheme, defaultProps, properties);
+    const { filter, facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, internalClassName, treePath } = props;
+    const link = filter?.url?.link || url?.link;
+    const value = filter?.value.label || valueLabel;
+    const label = filter?.facet.label || facetLabel;
+    const subProps = {
+        button: {
+            // default props
+            internalClassName: 'ss__filter__button',
+            disableA11y: true,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+        icon: {
+            // default props
+            icon: 'close-thin',
+            internalClassName: 'ss__filter__button__icon',
+            size: '10px',
+            // inherited props
+            ...defined({
+                disableStyles,
+                icon,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        filter: {
+            attributes: {
+                'aria-label': !label ? value : `remove selected ${label} filter ${value}`,
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        label,
+        value,
+    });
+    return value ? (_jsx(CacheProvider, { children: _jsx("a", { ...styling, className: classnames('ss__filter', className, internalClassName), onClick: (e) => {
+                link?.onClick && link.onClick(e);
+                onClick && onClick(e);
+            }, href: link?.href, tabIndex: 0, ...mergedLang.filter?.all, children: _jsxs(Button, { ...subProps.button, children: [_jsx(Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) }), !hideFacetLabel && (_jsxs("span", { className: "ss__filter__label", children: [label, separator && _jsx("span", { className: "ss__filter__label__separator", children: separator })] })), _jsx("span", { className: "ss__filter__value", children: value })] }) }) })) : null;
+});

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { ComponentProps, ListOption, SwatchOption } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare function Grid(properties: GridProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export type GridProps = {
+    lang?: Partial<GridLang>;
+} & GridTemplatesLegalProps & ComponentProps<GridProps>;
+export type GridTemplatesLegalProps = {
+    options: SwatchOption[];
+    hideLabels?: boolean;
+    multiSelect?: boolean;
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: ListOption, selected: ListOption[]) => void;
+    titleText?: string;
+    disabled?: boolean;
+    hideShowLess?: boolean;
+    selected?: ListOption | ListOption[];
+    columns?: number;
+    rows?: number;
+    gapSize?: string;
+    disableOverflowAction?: boolean;
+    overflowButton?: JSX.Element;
+    overflowButtonInGrid?: boolean;
+    onOverflowButtonClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, status: boolean, remainder: number) => void;
+    disableA11y?: boolean;
+};
+export interface GridLang {
+    showMoreText: Lang<{
+        limited: boolean;
+        remainder: number;
+        overflowButtonInGrid: boolean;
+    }>;
+    showLessText: Lang<{
+        limited: boolean;
+        remainder: number;
+        overflowButtonInGrid: boolean;
+    }>;
+}
+//# sourceMappingURL=Grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Grid/Grid.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AAyHxD,wBAAgB,IAAI,CAAC,UAAU,EAAE,SAAS,2DAyMzC;AAED,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACnH,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACxB,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,oBAAoB,EAAE,OAAO,CAAC;KAC9B,CAAC,CAAC;CACH"}

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

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { useState } from 'preact/hooks';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { filters } from '@athoscommerce/snap-toolbox';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useA11y, useLang } from '../../../hooks';
+import { Image } from '../../Atoms/Image';
+import { cloneWithProps, defined, mergeProps, mergeStyles } from '../../../utilities';
+import Color from 'color';
+const defaultStyles = ({ gapSize, columns, theme, disableOverflowAction }) => {
+    return css({
+        '.ss__grid__options': {
+            display: 'flex',
+            flexFlow: 'row wrap',
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            gap: gapSize,
+            gridAutoRows: `1fr`,
+            '.ss__grid__option': {
+                display: 'flex',
+                flexDirection: 'column',
+                boxSizing: 'content-box',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+                backgroundPosition: 'center !important',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flex: '0 1 auto',
+                border: `1px solid ${theme?.variables?.colors?.primary || '#333'}`,
+                textAlign: 'center',
+                wordBreak: 'break-all',
+                padding: '1em 0',
+                width: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+                margin: `0 ${gapSize} ${gapSize} 0`,
+                '.ss__grid__option__inner': {
+                    aspectRatio: '1/1',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    margin: 'auto',
+                    height: '100%',
+                    '.ss__image': {
+                        aspectRatio: '1/1',
+                    },
+                },
+                '.ss__grid__option__label': {
+                    cursor: 'pointer',
+                },
+                [`:nth-of-type(${columns}n)`]: {
+                    marginRight: '0',
+                },
+                '&.ss__grid__option--selected': {
+                    border: `2px solid ${theme?.variables?.colors?.primary || '#333'}`,
+                },
+                '&.ss__grid__option--disabled': {
+                    position: 'relative',
+                    opacity: '.5',
+                    cursor: 'none',
+                    pointerEvents: 'none',
+                },
+                '&.ss__grid__option--unavailable': {
+                    position: 'relative',
+                    opacity: '.5',
+                },
+                '&.ss__grid__option--disabled:before, &.ss__grid__option--unavailable:before': {
+                    content: '""',
+                    display: 'block',
+                    position: 'absolute',
+                    top: '50%',
+                    width: '90%',
+                    height: '1px',
+                    borderTop: '3px solid #eee',
+                    outline: '1px solid #ffff',
+                    transform: 'rotate(-45deg)',
+                },
+                '&.ss__grid__option--dark': {
+                    color: '#fff',
+                },
+                '&:hover:not(.ss__grid__option--selected)': {
+                    cursor: 'pointer',
+                },
+            },
+            '@supports (display: grid)': {
+                display: 'grid',
+                '.ss__grid__option': {
+                    padding: '0',
+                    margin: '0',
+                    width: 'initial',
+                },
+                '&::before': {
+                    content: '""',
+                    width: 0,
+                    paddingBottom: '100%',
+                    gridRow: '1 / 1',
+                    gridColumn: '1 / 1',
+                },
+                '&> *:first-of-type': {
+                    gridRow: '1 / 1',
+                    gridColumn: '1 / 1',
+                },
+            },
+        },
+        '.ss__grid__show-more-wrapper': {
+            '&:not(.ss__grid__option)': {
+                margin: '8px',
+            },
+            '&:hover': {
+                cursor: disableOverflowAction ? 'initial !important' : 'pointer !important',
+            },
+        },
+    });
+};
+export function Grid(properties) {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        // default props
+        multiSelect: false,
+        columns: 4,
+        gapSize: '8px',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('grid', globalTheme, defaultProps, properties);
+    const { titleText, onSelect, hideLabels, disableOverflowAction, multiSelect, overflowButton, columns, rows, hideShowLess, overflowButtonInGrid, disabled, options, disableStyles, onOverflowButtonClick, className, internalClassName, treePath, disableA11y, } = props;
+    const subProps = {
+        image: {
+            // default props
+            internalClassName: 'ss__grid__image',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    let selected = props.selected;
+    const styling = mergeStyles(props, defaultStyles);
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    const [selection, setSelection] = useState(selected || []);
+    // original selection state
+    const [originalSelected] = useState(selected || []);
+    // reset selection if 'selected' prop changes
+    try {
+        if (selected) {
+            const originalSelectedstr = JSON.stringify(originalSelected);
+            const selectedstr = JSON.stringify(selected);
+            const selectionstr = JSON.stringify(selection);
+            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
+                setSelection(selected);
+            }
+        }
+    }
+    catch (e) {
+        // noop
+    }
+    const makeSelection = (e, option) => {
+        if (multiSelect) {
+            let newArray;
+            if (selection.find((select) => select.value === option.value)) {
+                newArray = [...selection];
+                newArray.splice(newArray.findIndex((select) => select.value === option.value), 1);
+            }
+            else {
+                newArray = [...selection, option];
+            }
+            if (onSelect) {
+                onSelect(e, option, newArray);
+            }
+            setSelection(newArray);
+        }
+        else {
+            if (onSelect) {
+                onSelect(e, option, [option]);
+            }
+            setSelection([option]);
+        }
+    };
+    const limit = rows && columns ? columns * rows : options.length;
+    const remainder = Math.max(0, options.length - (limit - (overflowButtonInGrid ? 1 : 0)));
+    const [limited, setLimited] = useState(!!remainder);
+    const OverflowButtonElem = () => {
+        const showButton = hideShowLess ? limited : true;
+        //initialize lang
+        const defaultLang = {
+            showMoreText: {
+                value: overflowButtonInGrid ? `+ ${remainder}` : 'Show More',
+            },
+            showLessText: {
+                value: overflowButtonInGrid ? `- ${remainder}` : 'Show Less',
+            },
+        };
+        //deep merge with props.lang
+        const lang = deepmerge(defaultLang, props.lang || {});
+        const mergedLang = useLang(lang, {
+            limited,
+            remainder,
+        });
+        return showButton && remainder > 0 && options.length !== limit ? (_jsx("div", { className: `ss__grid__show-more-wrapper ${overflowButtonInGrid ? 'ss__grid__option' : ''}`, onClick: (e) => {
+                !disableOverflowAction && setLimited(!limited);
+                onOverflowButtonClick && onOverflowButtonClick(e, Boolean(limited), remainder);
+            }, role: 'button', ref: (e) => (!disableA11y && !disableOverflowAction ? useA11y(e) : null), ...(limited ? mergedLang.showMoreText.attributes : mergedLang.showLessText.attributes), children: overflowButton ? (cloneWithProps(overflowButton, { limited, remainder, treePath })) : limited ? (_jsx("span", { className: 'ss__grid__show-more', ...mergedLang.showMoreText.value })) : remainder ? (_jsx("span", { className: 'ss__grid__show-less', ...mergedLang.showLessText.value })) : null })) : null;
+    };
+    return typeof options == 'object' && options?.length ? (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__grid', disabled ? 'ss__grid--disabled' : '', className, internalClassName), children: [titleText && _jsx("h5", { className: "ss__grid__title", children: titleText }), _jsxs("div", { className: "ss__grid__options", children: [options.map((option, idx) => {
+                            const selected = selection.some((select) => select.value == option.value);
+                            let isDark = false;
+                            try {
+                                const color = new Color(option.background ? option.background.toLowerCase() : option.backgroundImageUrl ? `` : option.value.toString().toLowerCase());
+                                isDark = color.isDark();
+                            }
+                            catch (err) { }
+                            if (!limited || options.length == limit || idx < limit - (overflowButtonInGrid ? 1 : 0)) {
+                                return (_jsx("div", { className: classnames(`ss__grid__option`, {
+                                        'ss__grid__option--selected': selected,
+                                        'ss__grid__option--disabled': option?.disabled,
+                                        'ss__grid__option--unavailable': option?.available === false,
+                                        'ss__grid__option--dark': isDark,
+                                    }), onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option), ref: (e) => useA11y(e), title: option.label || option.value.toString(), role: "option", "aria-selected": selected, "aria-disabled": option.disabled, children: _jsxs("div", { className: classnames(`ss__grid__option__inner`, `ss__grid__option__inner--${filters.handleize(option.value.toString())}`), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, children: [!option.background && option.backgroundImageUrl ? (_jsx(Image, { ...subProps.image, src: option.backgroundImageUrl, alt: option.label || option.value.toString() })) : null, !hideLabels ? _jsx("label", { className: "ss__grid__option__label", children: option.label || option.value }) : null] }) }));
+                            }
+                        }), overflowButtonInGrid ? _jsx(OverflowButtonElem, {}) : null] }), !overflowButtonInGrid ? _jsx(OverflowButtonElem, {}) : null] }) })) : null;
+}

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

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

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

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

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

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