@athoscommerce/snap-preact 1.0.0

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

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

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

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

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

@@ -0,0 +1,120 @@
+"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.OverlayBadge = 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 providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var hooks_1 = require("../../../hooks");
+var defaultBadgeStyles = function (_a) {
+    var section = _a.section, top = _a.top, bottom = _a.bottom, index = _a.index, tag = _a.tag;
+    return (0, react_1.css)({
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: section == 'right' ? 'flex-end' : 'flex-start',
+        justifyContent: !top && !bottom ? 'center' : bottom && !top ? 'flex-end' : 'flex-start',
+        gap: '0.5em',
+        gridArea: tag,
+        boxSizing: 'border-box',
+        zIndex: Math.max(100 - index, 1),
+        width: '100%',
+        height: '100%',
+    });
+};
+var defaultStyles = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var controller = _a.controller;
+    var group = 'overlay';
+    var grid = (_f = (_e = (_d = (_c = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.badges) === null || _d === void 0 ? void 0 : _d.groups) === null || _e === void 0 ? void 0 : _e[group]) === null || _f === void 0 ? void 0 : _f.grid;
+    var gridProperties = {};
+    if ((grid === null || grid === void 0 ? void 0 : grid.length) && ((_g = grid[0]) === null || _g === void 0 ? void 0 : _g.length)) {
+        var gridTemplateAreas = grid.map(function (row) { return "\"".concat(row.join(' '), "\""); }).join(' ');
+        var columns = grid[0].length;
+        gridProperties = {
+            gridTemplateColumns: "repeat(".concat(columns, ", minmax(0, 1fr))"),
+            gridTemplateRows: "repeat(".concat(grid.length, ", minmax(0, 1fr))"),
+            gridTemplateAreas: gridTemplateAreas,
+        };
+    }
+    return (0, react_1.css)({
+        position: 'relative',
+        '& .ss__overlay-badge__grid-wrapper': __assign({ pointerEvents: 'none', display: 'grid', position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, gridProperties),
+    });
+};
+exports.OverlayBadge = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var globalTheme = (0, providers_1.useTheme)();
+    var snap = (0, providers_1.useSnap)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        limit: 1,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('overlayBadge', globalTheme, defaultProps, properties);
+    var result = props.result, children = props.children, controller = props.controller, renderEmpty = props.renderEmpty, limit = props.limit, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    if (!children) {
+        (_a = controller === null || controller === void 0 ? void 0 : controller.log) === null || _a === void 0 ? void 0 : _a.warn('OverlayBadge component must have children');
+        return null;
+    }
+    var meta = (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.meta;
+    if (!meta) {
+        (_c = controller === null || controller === void 0 ? void 0 : controller.log) === null || _c === void 0 ? void 0 : _c.warn('Controller must have a meta store');
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    var group = 'overlay';
+    var badgeComponentMap = __assign(__assign(__assign({}, utilities_1.defaultBadgeComponentMap), (((_d = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _d === void 0 ? void 0 : _d.library.import.component.badge) || {})), props.componentMap);
+    var sections = (_g = (_f = (_e = meta === null || meta === void 0 ? void 0 : meta.badges) === null || _e === void 0 ? void 0 : _e.groups) === null || _f === void 0 ? void 0 : _f[group]) === null || _g === void 0 ? void 0 : _g.sections;
+    // build locations and filter out the locations that have no badges in them to prevent rendering
+    var locations = sections === null || sections === void 0 ? void 0 : sections.map(function (section) {
+        var _a, _b;
+        var sectionSlots = (_b = (_a = meta === null || meta === void 0 ? void 0 : meta.data) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.locations[section];
+        var slots = sectionSlots === null || sectionSlots === void 0 ? void 0 : sectionSlots.map(function (slot, index) {
+            var _a;
+            return ({
+                tag: slot.tag,
+                name: slot.name,
+                top: index == 0,
+                bottom: index == sectionSlots.length - 1,
+                badges: (_a = result === null || result === void 0 ? void 0 : result.display.badges) === null || _a === void 0 ? void 0 : _a.atLocation("".concat(section, "/").concat(slot.tag)).slice(0, limit),
+            });
+        }).filter(function (slot) { var _a; return (_a = slot.badges) === null || _a === void 0 ? void 0 : _a.length; });
+        return {
+            section: section,
+            slots: slots,
+        };
+    }).filter(function (location) { var _a; return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.length; });
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    if (renderEmpty || (locations === null || locations === void 0 ? void 0 : locations.length)) {
+        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__overlay-badge', className, internalClassName), children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__overlay-badge__grid-wrapper", children: locations.map(function (location, index) {
+                            var _a;
+                            return (_a = location.slots) === null || _a === void 0 ? void 0 : _a.map(function (slot) {
+                                var badgeStyles = defaultBadgeStyles(__assign(__assign({}, props), { tag: slot.tag, section: location.section, index: index, top: slot.top, bottom: slot.bottom }));
+                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__overlay-badge__grid-wrapper__slot', "ss__overlay-badge__grid-wrapper__slot--".concat(slot.tag)), css: [badgeStyles], children: slot.badges.map(function (badge) {
+                                        var BadgeComponent = (0, hooks_1.useComponent)(badgeComponentMap, badge.component);
+                                        if (!BadgeComponent) {
+                                            return null;
+                                        }
+                                        return (0, jsx_runtime_1.jsx)(BadgeComponent, __assign({}, badge, badge.parameters, { treePath: treePath }));
+                                    }) }));
+                            });
+                        }) }), children] })) }));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+});

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,113 @@
+"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.Pagination = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Icon_1 = require("../../Atoms/Icon");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var hooks_1 = require("../../../hooks");
+var defaultStyles = function () {
+    return (0, react_1.css)({
+        '& .ss__pagination__page': {
+            padding: '5px',
+            display: 'inline-block',
+            minHeight: '1em',
+            minWidth: '1em',
+            textAlign: 'center',
+            '&.ss__pagination__page--active': {
+                fontWeight: 'bold',
+            },
+            '&:hover:not(.ss__pagination__page--active)': {},
+        },
+    });
+};
+exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        pages: 5,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('pagination', globalTheme, defaultProps, properties);
+    var pagination = props.pagination, controller = props.controller, pages = props.pages, pagesLeft = props.pagesLeft, pagesRight = props.pagesRight, hideFirst = props.hideFirst, hideLast = props.hideLast, persistFirst = props.persistFirst, persistLast = props.persistLast, hideEllipsis = props.hideEllipsis, hideNext = props.hideNext, hidePrev = props.hidePrev, nextButton = props.nextButton, prevButton = props.prevButton, firstButton = props.firstButton, lastButton = props.lastButton, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
+    var subProps = {
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__pagination__icon', size: '10px' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+    };
+    var store = pagination || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.pagination);
+    var getPagesParams = Number.isInteger(pagesLeft) && Number.isInteger(pagesRight) ? [pagesLeft, pagesRight] : [pages];
+    var _pages = store === null || store === void 0 ? void 0 : store.getPages.apply(store, getPagesParams);
+    var pageNumbers = _pages === null || _pages === void 0 ? void 0 : _pages.map(function (page) { return page.number; });
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    //initialize lang
+    var defaultLang = {
+        previous: {
+            attributes: {
+                'aria-label': 'go to previous page',
+            },
+        },
+        next: {
+            attributes: {
+                'aria-label': 'go to next page',
+            },
+        },
+        first: {
+            attributes: {
+                'aria-label': 'go to first page',
+            },
+        },
+        last: {
+            attributes: {
+                'aria-label': "go to last page ".concat(store === null || store === void 0 ? void 0 : store.last.number),
+            },
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_1.useLang)(lang, {
+        pagination: store,
+    });
+    return pageNumbers && pageNumbers.length > 1 && (store === null || store === void 0 ? void 0 : store.totalResults) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__pagination', className, internalClassName), children: (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Pagination", children: [store.previous && !hidePrev && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.previous.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous') }, (_b = mergedLang.previous) === null || _b === void 0 ? void 0 : _b.all, { children: prevButton ? prevButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-left', name: 'prev' })) }))), (!pageNumbers.includes(store.first.number) || (persistFirst && store.page !== store.first.number)) && !hideFirst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({}, store.first.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--first') }, (_c = mergedLang.first) === null || _c === void 0 ? void 0 : _c.all, { children: firstButton ? firstButton : store.first.number })), !pageNumbers.includes(2) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" })] })), _pages &&
+                        _pages.map(function (page) {
+                            var _a, _b;
+                            //initialize lang
+                            var defaultPageLang = {
+                                page: {
+                                    attributes: {
+                                        'aria-label': "go to page ".concat(page.number),
+                                    },
+                                },
+                            };
+                            //deep merge with props.lang
+                            var pagelang = (0, deepmerge_1.default)(defaultPageLang, props.lang || {});
+                            var mergedPageLang = (0, hooks_1.useLang)(pagelang, {
+                                pagination: store,
+                                page: page,
+                            });
+                            return page.active ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--active') }, (_a = mergedPageLang.page) === null || _a === void 0 ? void 0 : _a.all, { "aria-current": "true", "aria-live": "polite", children: page.number }))) : ((0, jsx_runtime_1.jsx)("a", __assign({}, page.url.link, { className: "ss__pagination__page" }, (_b = mergedPageLang.page) === null || _b === void 0 ? void 0 : _b.all, { children: page.number })));
+                        }), (!pageNumbers.includes(store.last.number) || (persistLast && store.page !== store.last.number)) && !hideLast && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" }), (0, jsx_runtime_1.jsx)("a", __assign({}, store.last.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last') }, (_d = mergedLang.last) === null || _d === void 0 ? void 0 : _d.all, { children: lastButton ? lastButton : store.last.number }))] })), store.next && !hideNext && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next') }, (_e = mergedLang.next) === null || _e === void 0 ? void 0 : _e.all, { children: nextButton ? nextButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right', name: 'next' })) })))] }) })) })) : null;
+});

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,89 @@
+"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.PerPage = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var providers_1 = require("../../../providers");
+var utilities_1 = require("../../../utilities");
+var Select_1 = require("../Select");
+var RadioList_1 = require("../RadioList");
+var List_1 = require("../List");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var defaultStyles = function () {
+    return (0, react_1.css)({
+        '.ss__button__content': {
+            display: 'flex',
+            alignItems: 'center',
+        },
+    });
+};
+exports.PerPage = (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 = {
+        label: 'Per Page',
+        type: 'dropdown',
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('perPage', globalTheme, defaultProps, properties);
+    var pagination = props.pagination, type = props.type, controller = props.controller, label = props.label, 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 subProps = {
+        select: __assign(__assign({}, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        RadioList: __assign(__assign({}, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+        List: __assign(__assign({ multiSelect: false, hideOptionCheckboxes: true, horizontal: true }, (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 selectedOption = store && ((_b = store === null || store === void 0 ? void 0 : store.pageSizeOptions) === null || _b === void 0 ? void 0 : _b.find(function (option) { return option.value == (store === null || store === void 0 ? void 0 : store.pageSize); }));
+    //initialize lang
+    var defaultLang = {
+        label: {
+            value: label,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    // options can be an Array or ObservableArray - but should have length
+    return (store === null || store === void 0 ? void 0 : store.pageSize) && typeof (store === null || store === void 0 ? void 0 : store.pageSizeOptions) == 'object' && ((_c = store.pageSizeOptions) === null || _c === void 0 ? void 0 : _c.length) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__per-page', 'ss__per-page__select', className, internalClassName) }, subProps.select, { label: label, options: store.pageSizeOptions, selected: selectedOption, onSelect: function (e, option) {
+                    store.setPageSize(+option.value);
+                }, lang: {
+                    buttonLabel: lang.label,
+                } }))), (type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'list' && ((0, jsx_runtime_1.jsx)(List_1.List, __assign({}, styling, { className: (0, classnames_1.default)('ss__per-page', 'ss__per-page__list', className, internalClassName) }, subProps.List, { onSelect: function (e, option) {
+                    store.setPageSize(+option.value);
+                }, requireSelection: true, options: store.pageSizeOptions, selected: store.pageSizeOption, titleText: label, lang: {
+                    title: lang.label,
+                } }))), (type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'radio' && ((0, jsx_runtime_1.jsx)(RadioList_1.RadioList, __assign({}, styling, { className: (0, classnames_1.default)('ss__per-page', 'ss__per-page__radioList', className, internalClassName) }, subProps.RadioList, { onSelect: function (e, option) {
+                    store.setPageSize(+option.value);
+                }, options: store.pageSizeOptions, selected: store.pageSizeOption, titleText: label, lang: {
+                    title: lang.label,
+                } })))] })) : null;
+});

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

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

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

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

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

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

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

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

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