@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/components/Molecules/FacetPaletteOptions/FacetPaletteOptions.js

@@ -0,0 +1,256 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FacetPaletteOptions = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var utilities_1 = require("../../../utilities");
+var Icon_1 = require("../../Atoms/Icon");
+var providers_1 = require("../../../providers");
+var toolbox_1 = require("../../../toolbox");
+var Checkbox_1 = require("../Checkbox");
+var hooks_1 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var color_1 = __importDefault(require("color"));
+var Image_1 = require("../../Atoms/Image");
+var defaultStyles = function (_a) {
+    var _b;
+    var _c, _d;
+    var columns = _a.columns, gridSize = _a.gridSize, gapSize = _a.gapSize, horizontal = _a.horizontal, theme = _a.theme;
+    return (0, react_1.css)({
+        display: 'flex',
+        flexFlow: 'row wrap',
+        gridTemplateColumns: columns
+            ? "repeat(".concat(columns, ", calc((100% - (").concat(columns - 1, " * ").concat(gapSize, "))/ ").concat(columns, "))")
+            : "repeat(auto-fill, minmax(".concat(gridSize, ", 1fr))"),
+        gap: gapSize,
+        '.ss__facet-palette-options__option--list': {
+            display: 'flex',
+            flexDirection: 'row',
+        },
+        '.ss__facet-palette-options__option': (_b = {
+                width: "calc(100% / ".concat(columns, " - ").concat(2 * Math.round((columns + 2) / 2), "px )"),
+                marginRight: gapSize,
+                marginBottom: gapSize
+            },
+            _b[":nth-of-type(".concat(columns, "n)")] = {
+                marginRight: '0',
+            },
+            _b['.ss__facet-palette-options__option__wrapper'] = {
+                border: "2px solid transparent",
+                borderRadius: '100%',
+                padding: '2px',
+            },
+            _b['.ss__facet-palette-options__option__palette'] = {
+                paddingTop: 'calc(100% - 2px)',
+                border: '1px solid #EBEBEB',
+                borderRadius: '100%',
+                position: 'relative',
+                '.ss__facet-palette-options__icon': {
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    left: 0,
+                    margin: 'auto',
+                    bottom: 0,
+                    textAlign: 'center',
+                    stroke: 'black',
+                    strokeWidth: '3px',
+                    strokeLinejoin: 'round',
+                    opacity: 0,
+                },
+                '&.ss__facet-palette-options__option__palette--image': {
+                    paddingTop: '0',
+                    height: 'auto',
+                },
+            },
+            _b['.ss__facet-palette-options__option__value'] = {
+                display: 'block',
+                textAlign: 'center',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            },
+            _b),
+        '@supports (display: grid)': {
+            display: 'grid',
+            '.ss__facet-palette-options__option': {
+                margin: '0',
+                width: 'initial',
+            },
+        },
+        '&.ss__facet-palette-options--list': {
+            display: 'flex',
+            flexDirection: horizontal ? 'row' : 'column',
+            '.ss__facet-palette-options__option__wrapper': {
+                borderColor: 'transparent',
+                width: '16px',
+                height: 'fit-content',
+            },
+            '.ss__facet-palette-options__option--filtered': {
+                '.ss__facet-palette-options__option__value': {
+                    fontWeight: 'bold',
+                },
+            },
+            '.ss__facet-palette-options__option--list': {
+                alignItems: 'center',
+            },
+            '.ss__facet-palette-options__option__value__count': {
+                marginLeft: '5px',
+            },
+            '.ss__facet-palette-options__checkbox': {
+                marginRight: '5px',
+            },
+        },
+        '&.ss__facet-palette-options--grid': {
+            '.ss__facet-palette-options__checkbox': {
+                display: 'flex',
+                textAlign: 'center',
+                overflow: 'hidden',
+                margin: 'auto',
+                marginBottom: '5px',
+            },
+            '.ss__facet-palette-options__option--filtered': {
+                '.ss__facet-palette-options__option__wrapper': {
+                    borderColor: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.primary) || '#333' + ' !important',
+                    padding: '0px',
+                    borderWidth: '4px',
+                },
+            },
+            '.ss__facet-palette-options__option': {
+                '&:hover': {
+                    cursor: 'pointer',
+                    '.ss__facet-palette-options__option__wrapper': {
+                        borderColor: '#EBEBEB',
+                    },
+                    '.ss__facet-palette-options__option__palette': {
+                        '.ss__facet-palette-options__icon': {
+                            opacity: 1,
+                        },
+                    },
+                },
+            },
+        },
+        '.ss__facet-palette-options__option__value__count': {
+            fontSize: '0.8em',
+            display: 'block',
+            textAlign: 'center',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+        },
+    });
+};
+exports.FacetPaletteOptions = (0, mobx_react_lite_1.observer)(function (properties) {
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        columns: 4,
+        layout: 'grid',
+        gridSize: '45px',
+        gapSize: properties.layout == 'list' ? '2px' : '8px',
+        hideCount: true,
+        hideCheckbox: true,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('facetPaletteOptions', globalTheme, defaultProps, properties);
+    var values = props.values, hideLabel = props.hideLabel, layout = props.layout, hideCount = props.hideCount, hideCheckbox = props.hideCheckbox, colorMapping = props.colorMapping, hideIcon = props.hideIcon, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, facet = props.facet, horizontal = props.horizontal, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    if (horizontal) {
+        props.columns = 0;
+    }
+    var subProps = {
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet-palette-options__icon' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            icon: 'close-thin',
+            color: 'white',
+            size: '40%',
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        image: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet-palette-options__image' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        checkbox: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__facet-palette-options__checkbox' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.values);
+    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-palette-options', "ss__facet-palette-options--".concat(layout === null || layout === void 0 ? void 0 : layout.toLowerCase()), className, internalClassName), children: facetValues.map(function (value) {
+                var _a, _b, _c, _d, _e;
+                //initialize lang
+                var defaultLang = {
+                    paletteOption: {
+                        attributes: {
+                            'aria-label': "".concat(value.filtered
+                                ? "remove selected filter ".concat((facet === null || facet === void 0 ? void 0 : facet.label) || '', " - ").concat(value.label)
+                                : (facet === null || facet === void 0 ? void 0 : facet.label)
+                                    ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
+                                    : "filter by ".concat(value.label)),
+                        },
+                    },
+                };
+                //deep merge with props.lang
+                var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                var mergedLang = (0, hooks_1.useLang)(lang, {
+                    facet: facet,
+                    value: value,
+                });
+                var lowerCaseColorMapping;
+                if (colorMapping) {
+                    lowerCaseColorMapping = Object.fromEntries(Object.entries(colorMapping).map(function (_a) {
+                        var key = _a[0], value = _a[1];
+                        return [key.toLowerCase(), value];
+                    }));
+                }
+                var background = lowerCaseColorMapping && lowerCaseColorMapping[value.label.toLowerCase()] && lowerCaseColorMapping[value.label.toLowerCase()].background
+                    ? lowerCaseColorMapping[value.label.toLowerCase()].background
+                    : value.value;
+                var backgroundImageUrl = lowerCaseColorMapping &&
+                    lowerCaseColorMapping[value.label.toLowerCase()] &&
+                    lowerCaseColorMapping[value.label.toLowerCase()].backgroundImageUrl
+                    ? lowerCaseColorMapping[value.label.toLowerCase()].backgroundImageUrl
+                    : undefined;
+                var isDark = false;
+                if (background) {
+                    try {
+                        var color = new color_1.default(background.toLowerCase());
+                        isDark = color.isDark();
+                    }
+                    catch (err) { }
+                }
+                return ((0, jsx_runtime_1.jsxs)("a", __assign({ className: (0, classnames_1.default)('ss__facet-palette-options__option', { 'ss__facet-palette-options__option--filtered': value.filtered }, { 'ss__facet-palette-options__option--dark': isDark }, "ss__facet-palette-options__option--".concat(layout === null || layout === void 0 ? void 0 : layout.toLowerCase())), href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href }, (hideLabel ? { title: value.label } : {}), valueProps, { onClick: function (e) {
+                        var _a, _b;
+                        (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
+                        onClick && onClick(e);
+                    }, "aria-atomic": "false" }, (previewOnFocus ? (0, toolbox_1.createHoverProps)(function () { return (value === null || value === void 0 ? void 0 : value.preview) && value.preview(); }) : {}), (_c = mergedLang.paletteOption) === null || _c === void 0 ? void 0 : _c.all, { children: [!hideCheckbox && ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: value.filtered, disableA11y: true }, mergedLang.paletteOption.attributes))), (0, jsx_runtime_1.jsx)("div", { className: "ss__facet-palette-options__option__wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__facet-palette-options__option__palette', "ss__facet-palette-options__option__palette--".concat(snap_toolbox_1.filters.handleize(value.value)), { 'ss__facet-palette-options__option__palette--image': backgroundImageUrl }), style: {
+                                    background: background,
+                                }, children: [backgroundImageUrl ? (0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: backgroundImageUrl, alt: value.label || value.value.toString() })) : null, !hideIcon && value.filtered && (layout === null || layout === void 0 ? void 0 : layout.toLowerCase()) == 'grid' && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon))] }) }), !hideLabel && ((0, jsx_runtime_1.jsx)("span", { className: "ss__facet-palette-options__option__value", children: (_e = (_d = lowerCaseColorMapping === null || lowerCaseColorMapping === void 0 ? void 0 : lowerCaseColorMapping[value.label.toLowerCase()]) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : value.label })), !hideCount && (value === null || value === void 0 ? void 0 : value.count) > 0 && (0, jsx_runtime_1.jsxs)("span", { className: "ss__facet-palette-options__option__value__count", children: ["(", value.count, ")"] })] }), value.value));
+            }) })) })) : null;
+});

package/dist/cjs/components/src/components/Molecules/FacetPaletteOptions/index.d.ts

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

package/dist/cjs/components/src/components/Molecules/FacetPaletteOptions/index.d.ts.map

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

package/dist/cjs/components/src/components/Molecules/FacetPaletteOptions/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FacetPaletteOptions"), exports);

package/dist/cjs/components/src/components/Molecules/FacetSlider/FacetSlider.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps } from '../../../types';
+import type { RangeFacet } from '@athoscommerce/snap-store-mobx';
+import { Lang } from '../../../hooks';
+export declare const FacetSlider: ((properties: FacetSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type FacetSliderProps = {
+    facet: RangeFacet;
+    lang?: Partial<FacetSliderLang>;
+} & FacetSliderTemplatesLegalProps & ComponentProps<FacetSliderProps>;
+export type FacetSliderTemplatesLegalProps = {
+    trackColor?: string;
+    railColor?: string;
+    handleColor?: string;
+    handleDraggingColor?: string;
+    valueTextColor?: string;
+    showTicks?: boolean;
+    tickSize?: number;
+    tickTextColor?: string;
+    stickyHandleLabel?: boolean;
+    separateHandles?: boolean;
+    onChange?: (values: number[]) => void;
+    onDrag?: (values: number[]) => void;
+};
+export interface FacetSliderLang {
+    sliderHandle: Lang<{
+        facet: RangeFacet;
+        value: number;
+    }>;
+}
+//# sourceMappingURL=FacetSlider.d.ts.map

package/dist/cjs/components/src/components/Molecules/FacetSlider/FacetSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacetSlider.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/FacetSlider/FacetSlider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AAwIxD,eAAO,MAAM,WAAW,gBAAyB,gBAAgB;;CAwK/D,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAChC,GAAG,8BAA8B,GACjC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAElC,MAAM,MAAM,8BAA8B,GAAG;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,MAAM,WAAW,eAAe;IAC/B,YAAY,EAAE,IAAI,CAAC;QAClB,KAAK,EAAE,UAAU,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACd,CAAC,CAAC;CACH"}

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

@@ -0,0 +1,262 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FacetSlider = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var react_ranger_1 = require("react-ranger");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var utilities_2 = require("../../../utilities");
+var hooks_2 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var defaultStyles = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var railColor = _a.railColor, trackColor = _a.trackColor, handleColor = _a.handleColor, valueTextColor = _a.valueTextColor, handleDraggingColor = _a.handleDraggingColor, showTicks = _a.showTicks, stickyHandleLabel = _a.stickyHandleLabel, tickTextColor = _a.tickTextColor, theme = _a.theme;
+    return (0, react_1.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 || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#333',
+            height: '100%',
+        },
+        '& .ss__facet-slider__segment': {
+            background: trackColor || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.secondary) || '#ccc',
+            height: '100%',
+        },
+        '& .ss__facet-slider__handles': {
+            textAlign: 'center',
+            '& button': {
+                '& .ss__facet-slider__handle': {
+                    background: handleColor || ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.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 || ((_j = (_h = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _h === void 0 ? void 0 : _h.colors) === null || _j === void 0 ? void 0 : _j.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',
+                },
+            },
+        },
+    });
+};
+exports.FacetSlider = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        tickSize: ((_a = properties.facet) === null || _a === void 0 ? void 0 : _a.step) ? ((_b = properties.facet) === null || _b === void 0 ? void 0 : _b.step) * 10 : 20,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('facetSlider', globalTheme, defaultProps, properties);
+    var showTicks = props.showTicks, facet = props.facet, stickyHandleLabel = props.stickyHandleLabel, separateHandles = props.separateHandles, onChange = props.onChange, onDrag = props.onDrag, className = props.className, internalClassName = props.internalClassName;
+    var tickSize = props.tickSize;
+    if (isNaN(Number(tickSize)) || Number(tickSize) <= 0) {
+        // fallback to default (causes chrome to crash)
+        tickSize = ((_c = properties.facet) === null || _c === void 0 ? void 0 : _c.step) ? ((_d = properties.facet) === null || _d === void 0 ? void 0 : _d.step) * 10 : 20;
+    }
+    else {
+        tickSize = Number(tickSize);
+    }
+    var _v = (0, hooks_1.useState)([(_e = facet.active) === null || _e === void 0 ? void 0 : _e.low, (_f = facet.active) === null || _f === void 0 ? void 0 : _f.high]), values = _v[0], setValues = _v[1];
+    var _w = (0, hooks_1.useState)([(_g = facet.active) === null || _g === void 0 ? void 0 : _g.low, (_h = facet.active) === null || _h === void 0 ? void 0 : _h.high]), active = _w[0], setActive = _w[1];
+    // Helper function to ensure min and max values are not equal
+    var ensureValueSeparation = function (val) {
+        var _a, _b;
+        if (!separateHandles || !facet.step) {
+            return val;
+        }
+        var minVal = val[0], maxVal = val[1];
+        var rangeMin = (_a = facet.range) === null || _a === void 0 ? void 0 : _a.low;
+        var rangeMax = (_b = facet.range) === null || _b === void 0 ? void 0 : _b.high;
+        var 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 (((((_j = facet.active) === null || _j === void 0 ? void 0 : _j.low) || ((_k = facet.active) === null || _k === void 0 ? void 0 : _k.low) === 0) && ((_l = facet.active) === null || _l === void 0 ? void 0 : _l.high) && values[0] != ((_m = facet.active) === null || _m === void 0 ? void 0 : _m.low)) || values[1] != ((_o = facet.active) === null || _o === void 0 ? void 0 : _o.high)) {
+        setActive([(_p = facet.active) === null || _p === void 0 ? void 0 : _p.low, (_q = facet.active) === null || _q === void 0 ? void 0 : _q.high]);
+        setValues([(_r = facet.active) === null || _r === void 0 ? void 0 : _r.low, (_s = facet.active) === null || _s === void 0 ? void 0 : _s.high]);
+    }
+    var _x = (0, react_ranger_1.useRanger)({
+        values: active,
+        onChange: function (val) {
+            var _a;
+            var adjustedVal = ensureValueSeparation(val);
+            setActive(adjustedVal);
+            // onChange called prior to urlManager changes to allow for mutation in function
+            onChange && onChange(adjustedVal);
+            if ((_a = facet === null || facet === void 0 ? void 0 : facet.services) === null || _a === void 0 ? void 0 : _a.urlManager) {
+                if (adjustedVal[0] == facet.range.low && adjustedVal[1] == facet.range.high) {
+                    facet.services.urlManager.remove('page').remove("filter.".concat(facet.field)).go();
+                }
+                else {
+                    facet.services.urlManager.remove('page').set("filter.".concat(facet.field), { low: adjustedVal[0], high: adjustedVal[1] }).go();
+                }
+            }
+            onChange && onChange(val);
+        },
+        onDrag: function (val) {
+            var adjustedVal = ensureValueSeparation(val);
+            setActive(adjustedVal);
+            onDrag && onDrag(adjustedVal);
+        },
+        min: (_t = facet.range) === null || _t === void 0 ? void 0 : _t.low,
+        max: (_u = facet.range) === null || _u === void 0 ? void 0 : _u.high,
+        stepSize: facet.step,
+        tickSize: tickSize,
+    }), getTrackProps = _x.getTrackProps, ticks = _x.ticks, segments = _x.segments, handles = _x.handles;
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return facet.range && facet.active && facet.step ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__facet-slider', className, internalClassName) }, getTrackProps(), styling, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__facet-slider__slider", children: [showTicks &&
+                            ticks.map(function (_a) {
+                                var value = _a.value, getTickProps = _a.getTickProps;
+                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__facet-slider__tick" }, getTickProps(), { children: (0, jsx_runtime_1.jsx)("div", { className: "ss__facet-slider__tick__label", children: value }) })));
+                            }), segments.map(function (_a, idx) {
+                            var getSegmentProps = _a.getSegmentProps;
+                            return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(idx === 1 ? 'ss__facet-slider__rail' : 'ss__facet-slider__segment') }, getSegmentProps())));
+                        }), (0, jsx_runtime_1.jsx)("div", { className: 'ss__facet-slider__handles', children: handles.map(function (_a, idx) {
+                                var _b, _c, _d, _e, _f, _g, _h;
+                                var value = _a.value, active = _a.active, getHandleProps = _a.getHandleProps;
+                                //initialize lang
+                                var defaultLang = {
+                                    sliderHandle: {
+                                        attributes: {
+                                            'aria-label': "".concat(facet.label, " button, current value ").concat(value, ", ").concat(((_b = facet.range) === null || _b === void 0 ? void 0 : _b.low) ? "min value ".concat((_c = facet.range) === null || _c === void 0 ? void 0 : _c.low, ",") : "", " ").concat(((_d = facet.range) === null || _d === void 0 ? void 0 : _d.high) ? "max value ".concat((_e = facet.range) === null || _e === void 0 ? void 0 : _e.high) : ""),
+                                        },
+                                    },
+                                };
+                                //deep merge with props.lang
+                                var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                var mergedLang = (0, hooks_2.useLang)(lang, {
+                                    facet: facet,
+                                    value: value,
+                                });
+                                return ((0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, getHandleProps({
+                                    style: {
+                                        appearance: 'none',
+                                        border: 'none',
+                                        background: 'transparent',
+                                        outline: 'none',
+                                    },
+                                }), (_f = mergedLang.sliderHandle) === null || _f === void 0 ? void 0 : _f.all, { ref: function (e) { return (0, hooks_2.useA11y)(e); }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__facet-slider__handle', { 'ss__facet-slider__handle--active': active }), children: stickyHandleLabel && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__handle__label', 'ss__facet-slider__handle__label--sticky', "ss__facet-slider__handle__label--".concat(idx), { 'ss__facet-slider__handle__label--pinleft': idx == 0 && value == ((_g = facet === null || facet === void 0 ? void 0 : facet.range) === null || _g === void 0 ? void 0 : _g.low) }, { 'ss__facet-slider__handle__label--pinright': idx == 1 && value == ((_h = facet === null || facet === void 0 ? void 0 : facet.range) === null || _h === void 0 ? void 0 : _h.high) }), children: (0, utilities_2.sprintf)(facet.formatValue, value) })) }) })));
+                            }) })] }), !stickyHandleLabel && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__facet-slider__labels', children: handles.map(function (_a, idx) {
+                        var value = _a.value;
+                        return ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)('ss__facet-slider__label', "ss__facet-slider__label--".concat(idx)), children: (0, utilities_2.sprintf)(facet.formatValue, value) }));
+                    }) }))] })) })) : null;
+});

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

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

package/dist/cjs/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/cjs/components/src/components/Molecules/FacetSlider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FacetSlider"), exports);

package/dist/cjs/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/cjs/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"}