@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,172 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = List;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Checkbox_1 = require("../Checkbox");
+var hooks_2 = require("../../../hooks");
+var Icon_1 = require("../../Atoms/Icon");
+var defaultStyles = function (_a) {
+    var horizontal = _a.horizontal;
+    return (0, react_1.css)({
+        display: 'flex',
+        flexDirection: horizontal ? 'row' : 'column',
+        alignItems: horizontal ? 'center' : undefined,
+        justifyItems: 'flex-start',
+        gap: '5px',
+        '.ss__list__options': {
+            border: 'none',
+            listStyle: 'none',
+            padding: '0px',
+            margin: '0px',
+            display: 'flex',
+            flexDirection: horizontal ? 'row' : 'column',
+            alignItems: horizontal ? 'center' : undefined,
+            justifyItems: 'flex-start',
+            gap: '5px',
+        },
+        '.ss__list__option': {
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '5px',
+            '.ss__list__option__label , .ss__list__option__icon': {
+                cursor: 'pointer',
+            },
+        },
+        '&.ss__list--disabled, .ss__list__option--disabled': {
+            cursor: 'none',
+            pointerEvents: 'none',
+            opacity: 0.5,
+        },
+        '&.ss__list--disabled, .ss__list__option--unavailable': {
+            cursor: 'pointer',
+            opacity: 0.5,
+        },
+        '.ss__list__option--selected': {
+            fontWeight: 'bold',
+        },
+    });
+};
+function List(properties) {
+    var _a, _b;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('list', globalTheme, defaultProps, properties);
+    var titleText = props.titleText, onSelect = props.onSelect, native = props.native, multiSelect = props.multiSelect, hideOptionLabels = props.hideOptionLabels, hideOptionIcons = props.hideOptionIcons, hideOptionCheckboxes = props.hideOptionCheckboxes, disabled = props.disabled, hideTitleText = props.hideTitleText, options = props.options, requireSelection = props.requireSelection, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var selected = props.selected;
+    var subProps = {
+        checkbox: __assign(__assign({ 
+            // default props
+            native: native }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__list__option__icon', size: '16px' }, (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);
+    if (selected && !Array.isArray(selected)) {
+        selected = [selected];
+    }
+    // selection state
+    var _c = (0, hooks_1.useState)(selected || []), selection = _c[0], setSelection = _c[1];
+    // original selection state
+    var originalSelected = (0, hooks_1.useState)(selected || [])[0];
+    // reset selection if 'selected' prop changes
+    try {
+        if (selected) {
+            var originalSelectedstr = JSON.stringify(originalSelected);
+            var selectedstr = JSON.stringify(selected);
+            var selectionstr = JSON.stringify(selection);
+            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
+                setSelection(selected);
+            }
+        }
+    }
+    catch (e) {
+        // noop
+    }
+    var makeSelection = function (e, option) {
+        var newArray;
+        if (multiSelect) {
+            if (selection.find(function (select) { return select.value === option.value; })) {
+                newArray = __spreadArray([], selection, true);
+                newArray.splice(newArray.findIndex(function (select) { return select.value === option.value; }), 1);
+                if (newArray.length == 0 && requireSelection) {
+                    newArray = [option];
+                }
+            }
+            else {
+                newArray = __spreadArray(__spreadArray([], selection, true), [option], false);
+            }
+        }
+        else {
+            if (!requireSelection && selection.find(function (select) { return select.value === option.value; })) {
+                newArray = [];
+            }
+            else {
+                newArray = [option];
+            }
+        }
+        if (onSelect) {
+            onSelect(e, option, newArray);
+        }
+        setSelection(newArray);
+    };
+    //initialize lang
+    var defaultLang = {};
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_2.useLang)(lang, {
+        options: options,
+        selectedOptions: selection,
+    });
+    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__list', { 'ss__list--native': native, 'ss__list--disabled': disabled }, className, internalClassName), children: [(titleText || ((_a = lang === null || lang === void 0 ? void 0 : lang.title) === null || _a === void 0 ? void 0 : _a.value)) && !hideTitleText && ((0, jsx_runtime_1.jsx)("h5", __assign({ className: "ss__list__title" }, (_b = mergedLang.title) === null || _b === void 0 ? void 0 : _b.all, { children: titleText }))), (0, jsx_runtime_1.jsx)("ul", { className: "ss__list__options", role: "listbox", "aria-label": titleText, children: options.map(function (option) {
+                        var _a;
+                        var selected = selection.some(function (select) { return select.value == option.value; });
+                        return ((0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)("ss__list__option ss__list__option--".concat(snap_toolbox_1.filters.handleize((_a = option.value) === null || _a === void 0 ? void 0 : _a.toString())), {
+                                'ss__list__option--selected': selected,
+                                'ss__list__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
+                                'ss__list__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
+                            }), ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, title: option.label, role: "option", "aria-selected": selected, "aria-disabled": option.disabled || (option === null || option === void 0 ? void 0 : option.available) === false, children: [!hideOptionCheckboxes && (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, __assign({}, subProps.checkbox, { checked: selected, disableA11y: true, "aria-label": option.label })), option.icon && !hideOptionIcons && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof option.icon == 'string' ? { icon: option.icon } : option.icon)))), !hideOptionLabels && (option.label || !option.icon) && ((0, jsx_runtime_1.jsx)("label", { className: "ss__list__option__label", children: option.label || option.value }))] }));
+                    }) })] })) })) : null;
+}

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

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

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

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

package/dist/cjs/components/src/components/Molecules/List/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("./List"), exports);

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

@@ -0,0 +1,37 @@
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+import type { SearchPaginationStore } from '@athoscommerce/snap-store-mobx';
+import type { SearchController } from '@athoscommerce/snap-controller';
+import { IconProps, IconType } from '../../Atoms/Icon';
+export declare const LoadMore: ((properties: LoadMoreProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type LoadMoreProps = {
+    pagination?: SearchPaginationStore;
+    controller?: SearchController;
+    lang?: Partial<LoadMoreLang>;
+} & LoadMoreTemplatesLegalProps & ComponentProps<LoadMoreProps>;
+export type LoadMoreTemplatesLegalProps = {
+    autoFetch?: boolean;
+    intersectionOffset?: string;
+    loading?: boolean;
+    loadMoreText?: string;
+    color?: string;
+    backgroundColor?: string;
+    progressIndicatorWidth?: string;
+    progressIndicatorSize?: string;
+    hideProgressIndicator?: boolean;
+    hideProgressText?: boolean;
+    loadingIcon?: IconType | Partial<IconProps>;
+    loadingLocation?: 'button' | 'outside';
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+export interface LoadMoreLang {
+    loadMoreButton: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+    progressText: Lang<{
+        pagination: SearchPaginationStore;
+    }>;
+}
+//# sourceMappingURL=LoadMore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadMore.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/LoadMore/LoadMore.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAA4B,MAAM,gBAAgB,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAqD7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAkKzD,CAAC;AAOH,MAAM,MAAM,aAAa,GAAG;IAC3B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAC7B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,MAAM,WAAW,YAAY;IAC5B,cAAc,EAAE,IAAI,CAAC;QACpB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;CACH"}

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

@@ -0,0 +1,158 @@
+"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.LoadMore = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var hooks_2 = require("../../../hooks");
+var Button_1 = require("../../Atoms/Button");
+var Icon_1 = require("../../Atoms/Icon");
+var hooks_3 = require("../../../hooks");
+var defaultStyles = function (_a) {
+    var _b, _c, _d, _e;
+    var pagination = _a.pagination, progressIndicatorWidth = _a.progressIndicatorWidth, progressIndicatorSize = _a.progressIndicatorSize, color = _a.color, backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '20px',
+        '& .ss__load-more__button--disabled': {
+            opacity: 0.7,
+            pointerEvents: 'none',
+            '&:hover': {
+                cursor: 'default',
+            },
+        },
+        '& .ss__load-more__button--hidden': {
+            display: 'none',
+        },
+        '& .ss__button': {
+            alignItems: 'center',
+        },
+        '& .ss__load-more__icon': {
+            marginLeft: '5px',
+            animation: "".concat((0, react_1.keyframes)({
+                '0%': { transform: "rotate(0deg)" },
+                '100%': { transform: "rotate(360deg)" },
+            }), " linear 1s infinite"),
+        },
+        '&.ss__load-more': {
+            '& .ss__load-more__progress': {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+                '& .ss__load-more__progress__indicator': {
+                    width: progressIndicatorWidth,
+                    background: backgroundColor || ((_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.secondary) || '#f8f8f8',
+                    borderRadius: progressIndicatorSize,
+                    '& .ss__load-more__progress__indicator__bar': {
+                        width: pagination ? "".concat((pagination.end / pagination.totalResults) * 100, "%") : '',
+                        background: color || ((_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.primary) || '#ccc',
+                        borderRadius: progressIndicatorSize,
+                        height: progressIndicatorSize,
+                    },
+                },
+                '& .ss__load-more__progress__text': {
+                    textAlign: 'center',
+                },
+            },
+        },
+    });
+};
+exports.LoadMore = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        loadMoreText: 'Load More',
+        loadingLocation: 'button',
+        loadingIcon: 'spinner',
+        progressIndicatorWidth: '300px',
+        progressIndicatorSize: '5px',
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('loadMore', globalTheme, defaultProps, properties);
+    var pagination = props.pagination, controller = props.controller, onClick = props.onClick, autoFetch = props.autoFetch, intersectionOffset = props.intersectionOffset, loading = props.loading, loadMoreText = props.loadMoreText, hideProgressIndicator = props.hideProgressIndicator, hideProgressText = props.hideProgressText, loadingLocation = props.loadingLocation, loadingIcon = props.loadingIcon, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var store = pagination || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.pagination);
+    var isLoading = typeof loading == 'boolean' ? loading : (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.loading;
+    var isButtonDisabled = (isLoading && loadingLocation === 'button') || !Boolean(store === null || store === void 0 ? void 0 : store.next);
+    var subProps = {
+        button: __assign(__assign({ 
+            // default props
+            internalClassName: (0, classnames_1.default)('ss__load-more__button', { 'ss__load-more__button--hidden': isLoading && loadingLocation === 'outside' }, { 'ss__load-more__button--disabled': isButtonDisabled }) }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__load-more__icon' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    if (!store) {
+        return null;
+    }
+    var styling = (0, utilities_1.mergeStyles)(__assign(__assign({}, props), { pagination: store }), defaultStyles);
+    var autoProps = {};
+    if (autoFetch) {
+        var loadMoreRef = (0, hooks_1.useRef)(null);
+        autoProps.ref = loadMoreRef;
+        var loadMoreInViewport = (0, hooks_2.useIntersection)(loadMoreRef, intersectionOffset || '0px');
+        var _d = (0, hooks_1.useState)(true), preventLoading = _d[0], setPreventLoading_1 = _d[1];
+        if (isLoading) {
+            setPreventLoading_1(true);
+        }
+        else {
+            (0, hooks_3.useFuncDebounce)(function () {
+                setPreventLoading_1(false);
+            }, 500);
+        }
+        if (loadMoreInViewport && store.next && !preventLoading) {
+            store.next.url.go({ history: 'replace' });
+        }
+    }
+    //initialize lang
+    var defaultLang = {
+        loadMoreButton: {
+            value: loadMoreText,
+            attributes: {
+                'aria-label': loadMoreText,
+            },
+        },
+        progressText: {
+            value: "You've viewed ".concat(store === null || store === void 0 ? void 0 : store.end, " of ").concat(store === null || store === void 0 ? void 0 : store.totalResults, " products"),
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_2.useLang)(lang, {
+        pagination: store,
+    });
+    return store.totalResults ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, autoProps, { className: (0, classnames_1.default)('ss__load-more', { 'ss__load-more--loading': isLoading }, { 'ss__load-more--autoFetch': autoFetch }, className, internalClassName), children: [!autoFetch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ onClick: function (e) {
+                                var _a;
+                                (_a = store.next) === null || _a === void 0 ? void 0 : _a.url.go({ history: 'replace' });
+                                onClick && onClick(e);
+                            } }, subProps.button, mergedLang.loadMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.loadMoreButton.value, { children: loadMoreText })), loadingIcon && isLoading && loadingLocation === 'button' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon)))) : null] })), loadingIcon && isLoading && loadingLocation === 'outside' && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof loadingIcon == 'string' ? { icon: loadingIcon } : loadingIcon))))] })), (!hideProgressIndicator || !hideProgressText) && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress', children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideProgressIndicator && ((0, jsx_runtime_1.jsx)("div", { className: 'ss__load-more__progress__indicator', children: (0, jsx_runtime_1.jsx)("div", { className: "ss__load-more__progress__indicator__bar" }) })), !hideProgressText && ((0, jsx_runtime_1.jsx)("div", __assign({ "aria-atomic": "true", "aria-live": "polite", className: 'ss__load-more__progress__text' }, (_c = mergedLang.progressText) === null || _c === void 0 ? void 0 : _c.all)))] }) }))] })) })) : null;
+});

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

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

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

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

package/dist/cjs/components/src/components/Molecules/LoadMore/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("./LoadMore"), exports);

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

@@ -0,0 +1,22 @@
+import { ComponentChildren } from 'preact';
+import { ComponentProps } from '../../../types';
+export declare const Modal: ((properties: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type ModalProps = ModalTemplatesLegalProps & ComponentProps<ModalProps>;
+export type ModalTemplatesLegalProps = {
+    button?: string | JSX.Element;
+    lockScroll?: boolean;
+    buttonSelector?: string | Element;
+    content?: string | JSX.Element;
+    children?: ComponentChildren;
+    disabled?: boolean;
+    open?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    startOpen?: boolean;
+    disableClickOutside?: boolean;
+    disableA11y?: boolean;
+    overlayColor?: string;
+    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
+};
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAK,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAqKnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}

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

@@ -0,0 +1,159 @@
+"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.Modal = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var providers_1 = require("../../../providers");
+var hooks_2 = require("../../../hooks");
+var utilities_1 = require("../../../utilities");
+var useA11y_1 = require("../../../hooks/useA11y");
+var Overlay_1 = require("../../Atoms/Overlay");
+var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+var defaultStyles = function () {
+    return (0, react_1.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,
+        },
+    });
+};
+exports.Modal = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        startOpen: false,
+        disableA11y: false,
+        lockScroll: true,
+        overlayColor: 'rgba(0,0,0,0.8)',
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('modal', globalTheme, defaultProps, properties);
+    var button = props.button, content = props.content, buttonSelector = props.buttonSelector, children = props.children, disabled = props.disabled, open = props.open, onClick = props.onClick, lockScroll = props.lockScroll, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, disableStyles = props.disableStyles, overlayColor = props.overlayColor, onOverlayClick = props.onOverlayClick, treePath = props.treePath;
+    var subProps = {
+        overlay: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__modal__overlay', onClick: function (e) {
+                onOverlayClick && onOverlayClick(e);
+                toggleShowContent();
+            } }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+            color: overlayColor,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var showContent, setShowContent;
+    var stateful = open === undefined;
+    if (stateful) {
+        _a = (0, hooks_1.useState)(startOpen), showContent = _a[0], setShowContent = _a[1];
+    }
+    else {
+        showContent = open;
+    }
+    var innerRef;
+    if (!disableClickOutside) {
+        innerRef = (0, hooks_2.useClickOutside)(function () {
+            if (showContent) {
+                if (!disabled) {
+                    stateful && setShowContent && setShowContent(false);
+                }
+            }
+        });
+    }
+    var toggleShowContent = function () {
+        if (stateful) {
+            setShowContent &&
+                setShowContent(function (prev) {
+                    return !prev;
+                });
+        }
+        // overflow will be handled by useEffect below
+    };
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // Effect to lock/unlock scroll when modal opens/closes
+    (0, hooks_1.useEffect)(function () {
+        if (showContent && lockScroll) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return function () {
+            document.body.style.overflow = '';
+        };
+    }, [showContent, lockScroll]);
+    (0, hooks_1.useEffect)(function () {
+        var existingButton = buttonSelector ? (typeof buttonSelector === 'string' ? document.querySelector(buttonSelector) : buttonSelector) : null;
+        var debouncedHandleResize = (0, snap_toolbox_1.debounce)(function () {
+            setTimeout(function () {
+                if (showContent && lockScroll) {
+                    document.body.style.overflow = 'hidden';
+                }
+                else {
+                    document.body.style.overflow = '';
+                }
+            }, 100);
+        }, 10);
+        var clickListener = function (e) {
+            toggleShowContent();
+            onClick && onClick(e);
+        };
+        if (existingButton) {
+            if (!disabled) {
+                existingButton.addEventListener('click', clickListener);
+            }
+        }
+        window.addEventListener('resize', debouncedHandleResize);
+        return function () {
+            window.removeEventListener('resize', debouncedHandleResize);
+            if (existingButton) {
+                existingButton.removeEventListener('click', clickListener);
+            }
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__modal', { 'ss__modal--open': showContent }, { 'ss__modal--disabled': disabled }, className, internalClassName), ref: innerRef, children: [!buttonSelector && button && ((0, jsx_runtime_1.jsx)("div", { className: "ss__modal__button", ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-expanded": showContent, role: "button", onClick: function (e) {
+                        if (!disabled) {
+                            toggleShowContent();
+                            onClick && onClick(e);
+                        }
+                    }, children: (0, utilities_1.cloneWithProps)(button, { open: showContent, toggleOpen: toggleShowContent, treePath: treePath }) })), (content || children) && showContent && ((0, jsx_runtime_1.jsxs)("div", { className: "ss__modal__content", ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, children: [(0, utilities_1.cloneWithProps)(content, { open: showContent, toggleOpen: toggleShowContent, treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { open: showContent, toggleOpen: toggleShowContent, treePath: treePath })] })), (0, jsx_runtime_1.jsx)(Overlay_1.Overlay, __assign({}, subProps.overlay, { active: Boolean(showContent) }))] })) }));
+});

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

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

package/dist/cjs/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/cjs/components/src/components/Molecules/Modal/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("./Modal"), exports);