@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/components/Molecules/TemplatesEditor/Controls/Dropdown.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownControl = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var Assets_1 = require("../Assets");
+var DropdownControl = function (props) {
+    var label = props.label, description = props.description, onReset = props.onReset, disabled = props.disabled, showReset = props.showReset, value = props.value, options = props.options, onChange = props.onChange;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "option dropdown", children: [(0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsx)("div", { className: "reset", children: showReset ? ((0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: function () {
+                        onReset();
+                    }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) })) : null }), (0, jsx_runtime_1.jsxs)("div", { className: "value", children: [(0, jsx_runtime_1.jsx)("select", { onChange: function (e) { return onChange(e.target.value); }, disabled: disabled, value: value, children: options.map(function (option, index) { return ((0, jsx_runtime_1.jsx)("option", { value: option, children: option }, index)); }) }), (0, jsx_runtime_1.jsx)("span", { children: description })] })] }));
+};
+exports.DropdownControl = DropdownControl;

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

@@ -0,0 +1,13 @@
+import { TemplateEditorStore } from '../../../../../src/Templates/Stores/TemplateEditor/TemplateEditorStore';
+import { TemplatesStore } from '../../../../../src/Templates/Stores/TemplateStore';
+import { SnapTemplates } from '../../../../../src';
+export declare const TemplatesEditor: ((properties: TemplatesEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export interface TemplatesEditorProps {
+    onRemoveClick: () => void;
+    templatesStore: TemplatesStore;
+    editorStore: TemplateEditorStore;
+    snap: SnapTemplates;
+}
+//# sourceMappingURL=TemplatesEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplatesEditor.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TemplatesEditor/TemplatesEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAiB,MAAM,mDAAmD,CAAC;AAClG,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAsTnD,eAAO,MAAM,eAAe,gBAAyB,oBAAoB;;CAuGvE,CAAC;AAYH,MAAM,WAAW,oBAAoB;IACpC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;CACpB"}

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

@@ -0,0 +1,351 @@
+"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.TemplatesEditor = 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 Assets_1 = require("./Assets");
+var AbstractedControls_1 = require("./Components/AbstractedControls");
+var Dropdown_1 = require("./Controls/Dropdown");
+var CSS = {
+    TemplatesEditor: function (_a) {
+        return (0, react_1.css)({
+            display: 'flex',
+            flexDirection: 'column',
+            minWidth: '400px',
+            overflow: 'hidden',
+            fontSize: '14px',
+            position: 'fixed',
+            zIndex: '10003',
+            cursor: 'auto',
+            top: '10px',
+            right: 0,
+            color: '#333',
+            borderRight: 0,
+            borderTopLeftRadius: '5px',
+            borderBottomLeftRadius: '5px',
+            boxShadow: 'rgba(81, 81, 81, 0.5) -1px 0px 3px 0px',
+            border: '1px solid #D0E0F3',
+            background: '#F2F6FC',
+            transition: 'right ease 0.2s, height ease 0.3s 0.3s, max-height ease 0.3s 0.3s',
+            boxSizing: 'border-box',
+            width: '400px',
+            maxWidth: '90vw',
+            maxHeight: 'calc(100vh - 20px)',
+            '*': {
+                boxSizing: 'border-box',
+            },
+            '.ss__template-editor__header': {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '8px 8px 4px 8px',
+                '.athos-logo': {
+                    maxWidth: '100%',
+                    width: '200px',
+                    '.cls-1': {
+                        fill: '#00aeef',
+                    },
+                    '.cls-2': {
+                        fill: '#1d4990',
+                    },
+                },
+                '.header-actions': {
+                    display: 'flex',
+                    gap: '10px',
+                    '& button': {
+                        width: 'unset',
+                    },
+                },
+            },
+            '>aside': {
+                overflow: 'hidden',
+                flexGrow: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                '.tab-selection': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '0 5px',
+                    gap: '4px',
+                    height: '33px',
+                    flexShrink: 0,
+                    '.tab': {
+                        fontSize: '12px',
+                        position: 'relative',
+                        boxShadow: 'rgb(110 110 110 / 50%) 0px -1px 2px -1px',
+                        textTransform: 'capitalize',
+                        top: '6px',
+                        fontWeight: 'bold',
+                        border: '1px solid #D0E0F3',
+                        borderBottom: 'none',
+                        padding: '5px 10px 4px 10px',
+                        height: '100%',
+                        color: '#9eaab8',
+                        backgroundColor: '#dce3eb',
+                        borderTopLeftRadius: '5px',
+                        borderTopRightRadius: '5px',
+                        cursor: 'pointer',
+                        transition: 'font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+                        '&:hover': {
+                            backgroundColor: '#d2deed',
+                            color: '#7a838e',
+                        },
+                        '&.active': {
+                            fontSize: '14px',
+                            backgroundColor: '#fff',
+                            color: '#283E57',
+                            paddingTop: '7px',
+                            top: '2px',
+                            zIndex: 4,
+                        },
+                    },
+                },
+                '.tab-view': {
+                    position: 'relative',
+                    zIndex: 3,
+                    borderTop: '2px solid #D0E0F3',
+                    background: '#fff',
+                    flexGrow: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: 0,
+                    '.tab-view-shadow': {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: '10px',
+                        bottom: 0,
+                        boxShadow: 'inset 5px 12px 6px 0px #fff',
+                        pointerEvents: 'none',
+                        '&.bottom': {
+                            boxShadow: 'inset 0 -12px 6px 0px #fff',
+                        },
+                    },
+                    '.tab-view-content': {
+                        padding: '0 10px 10px',
+                        flexGrow: 1,
+                        overflowY: 'auto',
+                        minHeight: 0,
+                        '&::-webkit-scrollbar': {
+                            width: '8px',
+                        },
+                        '&::-webkit-scrollbar-track': {
+                            background: '#f5f5f5',
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                            background: '#96aabe',
+                        },
+                    },
+                },
+            },
+            '&.ss__template-editor--collapsed': {
+                right: '-354px',
+                transition: 'right ease 0.5s, height ease 0.3s 0.3s, max-height ease 0.3s 0.3s',
+                height: '48px',
+                maxHeight: '48px',
+                cursor: 'pointer',
+                overflow: 'hidden',
+            },
+            'input, select, option, optgroup, button, h1, h2, h3, h4, h5, h6, i': {
+                all: 'revert',
+                color: '#283E57',
+            },
+            h1: { fontSize: '20px' },
+            h2: { fontSize: '18px' },
+            h3: { fontSize: '16px' },
+            h4: { fontSize: '14px' },
+            h5: { fontSize: '12px' },
+            h6: { fontSize: '10px' },
+            'input[type="text"], input[type="number"], select, button': {
+                border: '1px solid #ccc',
+                height: '30px',
+                minHeight: '30px',
+                padding: '0 10px',
+                borderRadius: '5px',
+                fontSize: '12px',
+                color: '#333',
+                backgroundColor: '#fff',
+                boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, 0.1)',
+                width: '100%',
+                '&:hover': {
+                    color: 'unset',
+                    background: 'unset',
+                },
+                '&:disabled': {
+                    borderColor: '#ddd',
+                    boxShadow: 'none',
+                    opacity: 1,
+                    color: '#999',
+                    cursor: 'default',
+                },
+            },
+            'input[type="checkbox"]': {
+                height: '18px',
+                width: '18px',
+                margin: '6px 0',
+                border: '1px solid #ccc',
+            },
+            button: {
+                border: 0,
+                outline: 0,
+                cursor: 'pointer',
+                borderRadius: '4px',
+                color: '#fff',
+                backgroundColor: '#283e57',
+                '&:hover': {
+                    color: '#fff',
+                    backgroundColor: '#0e1f33ff',
+                },
+            },
+            'input[type="number"]': { width: '50px' },
+            'input[type="color"]': {
+                width: '70px',
+                height: '30px',
+                border: '1px solid #ccc',
+                borderRadius: '5px',
+                outline: 'none',
+                boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, 0.1)',
+                padding: 0,
+                margin: '0 5px 0 0',
+                '&::-moz-color-swatch': {
+                    border: 'none',
+                },
+                '&::-webkit-color-swatch-wrapper': {
+                    padding: 0,
+                    borderRadius: 0,
+                },
+                '&::-webkit-color-swatch': {
+                    border: 'none',
+                },
+            },
+            textarea: {
+                width: '100%',
+                height: '200px',
+                border: '1px solid #ccc',
+                color: '#777',
+                padding: '10px',
+            },
+            '.reset': {
+                flex: '0 0 30px',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                button: {
+                    '&:hover': {
+                        background: 'unset',
+                    },
+                    margin: '0 0.5em',
+                    padding: 0,
+                    background: 'unset',
+                    border: 'unset',
+                    cursor: 'pointer',
+                    boxShadow: 'unset',
+                    height: 'unset',
+                    svg: {
+                        fill: '#1c71bf',
+                        height: '15px',
+                    },
+                },
+            },
+            '.control-title': {
+                display: 'flex',
+                alignItems: 'center',
+                margin: '5px 0',
+                height: '30px',
+                h4: {
+                    margin: 0,
+                },
+            },
+            '.group-title': {
+                display: 'flex',
+                alignItems: 'center',
+                margin: '5px 0',
+                height: '30px',
+                h4: {
+                    margin: 0,
+                },
+            },
+            '.option': {
+                display: 'flex',
+                alignItems: 'center',
+                marginBottom: '5px',
+                fontSize: '12px',
+                label: {
+                    flex: '0 0 12em',
+                },
+                '.value': {
+                    flex: '1 1 auto',
+                    display: 'flex',
+                    alignItems: 'center',
+                    '.invalid': {
+                        border: '1px solid #cc0000',
+                        outline: '1px solid #cc0000',
+                    },
+                },
+                '&.color-picker': {
+                    alignItems: 'center',
+                    '.value': {
+                        alignItems: 'center',
+                    },
+                },
+            },
+        });
+    },
+};
+exports.TemplatesEditor = (0, mobx_react_lite_1.observer)(function (properties) {
+    var onRemoveClick = properties.onRemoveClick, templatesStore = properties.templatesStore, editorStore = properties.editorStore, snap = properties.snap;
+    var styling = {
+        css: [CSS.TemplatesEditor(__assign({}, properties))],
+    };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('ss__template-editor', { 'ss__template-editor--collapsed': editorStore.state.hidden }) }, styling, { onClick: function (e) {
+                e.stopPropagation();
+                editorStore.toggleHide(false);
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__template-editor__header", children: [(0, jsx_runtime_1.jsx)("div", { className: 'logo', children: (0, jsx_runtime_1.jsx)(Assets_1.AthosCommerceLogo, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: 'header-actions', onClick: function (e) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                editorStore.toggleHide(true);
+                            }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: function (e) {
+                                        e.stopPropagation();
+                                        if (confirm('Closing the editor will disable modification.')) {
+                                            onRemoveClick();
+                                        }
+                                    }, children: "Close" }), (0, jsx_runtime_1.jsx)("button", { onClick: function () {
+                                        editorStore.toggleHide(true);
+                                    }, children: "Hide" })] })] }), (0, jsx_runtime_1.jsxs)("aside", { children: [(0, jsx_runtime_1.jsx)("div", { className: "tab-selection", children: editorStore.tabs.map(function (tab, i) {
+                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('tab', { active: editorStore.state.activeTab === tab }), onClick: function () {
+                                        editorStore.switchTabs(tab);
+                                    }, children: tab }, i));
+                            }) }), (0, jsx_runtime_1.jsxs)("div", { className: "tab-view", children: [(0, jsx_runtime_1.jsx)("div", { className: "tab-view-shadow" }), (0, jsx_runtime_1.jsxs)("div", { className: "tab-view-content", children: [editorStore.state.activeTab === 'templates' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TemplateTargetSettings, { feature: "search", templatesStore: templatesStore }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: snap.controllers.search, feature: "controllers/search" }), (0, jsx_runtime_1.jsx)(TemplateTargetSettings, { feature: "autocomplete", templatesStore: templatesStore }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { editorStore: editorStore, data: snap.controllers.autocomplete, feature: "controllers/autocomplete" }), (0, jsx_runtime_1.jsx)(TemplateTargetSettings, { feature: "recommendation/default", templatesStore: templatesStore }), (0, jsx_runtime_1.jsx)(TemplateTargetSettings, { feature: "recommendation/bundle", templatesStore: templatesStore })] })) : (''), editorStore.state.activeTab === 'configuration' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { title: "Project Configuration", editorStore: editorStore, feature: "templates/config" }), (0, jsx_runtime_1.jsx)(AbstractedControls_1.AbstractedControls, { title: "Theme Configuration", editorStore: editorStore, feature: "templates/theme" })] })) : ('')] }), (0, jsx_runtime_1.jsx)("div", { className: "tab-view-shadow bottom" })] })] }), (0, jsx_runtime_1.jsx)("footer", {})] })) }));
+});
+var TemplateTargetSettings = (0, mobx_react_lite_1.observer)(function (props) {
+    var _a, _b, _c, _d, _e;
+    var feature = props.feature, templatesStore = props.templatesStore;
+    var _f = feature.split('/'), type = _f[0], _g = _f[1], recsType = _g === void 0 ? '' : _g;
+    var idPrefix = "".concat(type).concat(recsType ? "-".concat(recsType) : '');
+    var config = templatesStore.config;
+    var configTarget = ((_b = (_a = config[type]) === null || _a === void 0 ? void 0 : _a[recsType]) === null || _b === void 0 ? void 0 : _b["".concat(recsType.charAt(0).toUpperCase() + recsType.slice(1))]) || ((_d = (_c = config[type]) === null || _c === void 0 ? void 0 : _c.targets) === null || _d === void 0 ? void 0 : _d[0]);
+    var libraryComponents = templatesStore.library.components;
+    var libraryTemplates = recsType ? (_e = libraryComponents[type]) === null || _e === void 0 ? void 0 : _e[recsType] : libraryComponents[type];
+    var libraryResultComponents = libraryComponents === null || libraryComponents === void 0 ? void 0 : libraryComponents.result;
+    var DEAFULT_RESULT_COMPONENT = 'Result';
+    var activeTarget = templatesStore.getTarget(feature, configTarget.selector);
+    var showTemplateReset = Boolean(activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.component) && (activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.component) !== (configTarget === null || configTarget === void 0 ? void 0 : configTarget.component);
+    var showResultTemplateReset = ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.resultComponent) || DEAFULT_RESULT_COMPONENT) != ((configTarget === null || configTarget === void 0 ? void 0 : configTarget.resultComponent) || DEAFULT_RESULT_COMPONENT);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "template-target-settings", children: [(0, jsx_runtime_1.jsx)("h3", { children: type.charAt(0).toUpperCase() + type.slice(1) + (recsType ? " (".concat(recsType, ")") : '') }), !recsType && ((0, jsx_runtime_1.jsxs)("div", { className: "option", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "".concat(idPrefix, "-target"), children: "Target" }), (0, jsx_runtime_1.jsx)("div", { className: "reset" }), (0, jsx_runtime_1.jsx)("div", { className: "value", children: (0, jsx_runtime_1.jsx)("input", { id: "".concat(idPrefix, "-target"), type: "text", placeholder: '', disabled: true, value: configTarget.selector }) })] })), (0, jsx_runtime_1.jsx)(Dropdown_1.DropdownControl, { label: 'Template', description: '', showReset: showTemplateReset, options: Object.keys(libraryTemplates), onReset: function () { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setComponent(configTarget === null || configTarget === void 0 ? void 0 : configTarget.component); }, disabled: false, value: activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.component, onChange: function (value) { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setComponent("".concat(value)); } }, "".concat(idPrefix, "-template")), (0, jsx_runtime_1.jsx)(Dropdown_1.DropdownControl, { label: 'Result Template', description: '', showReset: showResultTemplateReset, options: Object.keys(libraryResultComponents), onReset: function () { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setResultComponent((configTarget === null || configTarget === void 0 ? void 0 : configTarget.resultComponent) || DEAFULT_RESULT_COMPONENT); }, disabled: false, value: activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.resultComponent, onChange: function (value) { return activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.setResultComponent("".concat(value)); } }, "".concat(idPrefix, "-result-template"))] }));
+});

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import type { AutocompleteTermStore } from '@athoscommerce/snap-store-mobx';
+import { ComponentProps } from '../../../types';
+import { Term } from '@athoscommerce/snap-store-mobx';
+import type { Lang } from '../../../hooks';
+export declare const Terms: ((properties: TermsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type TermsProps = {
+    controller: AutocompleteController;
+    terms: AutocompleteTermStore;
+    lang?: Partial<TermsLang>;
+    name?: TermsNames;
+} & TermsTemplatesLegalProps & ComponentProps<TermsProps>;
+export type TermsTemplatesLegalProps = {
+    title?: string;
+    vertical?: boolean;
+    limit?: number;
+    onTermClick?: (e: React.MouseEvent<Element, MouseEvent>, term: Term) => void;
+    previewOnHover?: boolean;
+    emIfy?: boolean;
+};
+export interface TermsLang {
+    term?: Lang<{
+        index: number;
+        numberOfTerms: number;
+        term: Term;
+    }>;
+    title?: Lang<{
+        controller: AutocompleteController;
+    }>;
+}
+export type TermsNames = 'trending' | 'suggestions' | 'history';
+//# sourceMappingURL=Terms.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Terms.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Terms/Terms.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAEtD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAkE3C,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CAoFnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CAClB,GAAG,wBAAwB,GAC3B,cAAc,CAAC,UAAU,CAAC,CAAC;AAE5B,MAAM,MAAM,wBAAwB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,SAAS;IACzB,IAAI,CAAC,EAAE,IAAI,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,IAAI,EAAE,IAAI,CAAC;KACX,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;QACZ,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC"}

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

@@ -0,0 +1,135 @@
+"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.Terms = 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 toolbox_1 = require("../../../toolbox");
+var utilities_1 = require("../../../utilities");
+var hooks_1 = require("../../../hooks");
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var defaultStyles = function (_a) {
+    var _b, _c;
+    var vertical = _a.vertical, theme = _a.theme;
+    return (0, react_1.css)({
+        '.ss__terms__title': {
+            fontWeight: 'normal',
+            margin: 0,
+            textTransform: 'uppercase',
+            padding: '10px',
+            h5: {
+                fontSize: '.8em',
+                margin: 0,
+            },
+        },
+        '.ss__terms__options': {
+            display: 'flex',
+            justifyContent: 'space-evenly',
+            flexDirection: vertical ? 'column' : 'row',
+            flexWrap: 'wrap',
+            padding: '0px',
+            '.ss__terms__option': {
+                listStyle: 'none',
+                padding: '10px',
+                // flexGrow: vertical  ? '1' : undefined,
+                // textAlign: vertical ? 'center' : undefined,
+                wordBreak: 'break-all',
+                a: {
+                    display: 'block',
+                    em: {
+                        fontStyle: 'normal',
+                    },
+                },
+                '&.ss__terms__option--active': {
+                    a: {
+                        fontWeight: 'bold',
+                        color: (_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,
+                    },
+                },
+            },
+        },
+    });
+};
+var escapeRegExp = function (string) {
+    return string === null || string === void 0 ? void 0 : string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+var emIfyTerm = function (term, search) {
+    if (term && search) {
+        var match = term.match(escapeRegExp(search));
+        if (search && term && match && typeof match.index == 'number') {
+            var beforeMatch = term.slice(0, match.index);
+            var afterMatch = term.slice(match.index + search.length, term.length);
+            return "".concat(beforeMatch ? "<em>".concat(beforeMatch, "</em>") : '').concat(search).concat(afterMatch ? "<em>".concat(afterMatch, "</em>") : '');
+        }
+    }
+    return "<em>".concat(term, "</em>");
+};
+exports.Terms = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        vertical: true,
+        previewOnHover: true,
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('terms', globalTheme, defaultProps, properties);
+    var title = props.title, onTermClick = props.onTermClick, limit = props.limit, previewOnHover = props.previewOnHover, emIfy = props.emIfy, className = props.className, internalClassName = props.internalClassName, controller = props.controller;
+    var currentInput = (_b = (_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.input;
+    var terms = props.terms;
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var termClickEvent = function (e, term) {
+        onTermClick && onTermClick(e, term);
+        // remove focus from input (close the autocomplete)
+        (controller === null || controller === void 0 ? void 0 : controller.setFocused) && (controller === null || controller === void 0 ? void 0 : controller.setFocused());
+    };
+    var termsToShow = limit ? terms === null || terms === void 0 ? void 0 : terms.slice(0, limit) : terms;
+    //initialize lang
+    var defaultLang = {
+        title: {
+            value: title,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedTitleLang = (0, hooks_1.useLang)({ title: lang.title }, {
+        controller: controller,
+    });
+    return (termsToShow === null || termsToShow === void 0 ? void 0 : termsToShow.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__terms', className, internalClassName), children: [title ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__terms__title", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, mergedTitleLang.title.all)) })) : null, (0, jsx_runtime_1.jsx)("ul", { className: "ss__terms__options", "aria-label": title, children: termsToShow === null || termsToShow === void 0 ? void 0 : termsToShow.map(function (term, idx) {
+                        var _a;
+                        //initialize lang
+                        var defaultTermLang = {
+                            term: {
+                                value: "".concat(emIfy ? emIfyTerm(term.value, currentInput || '') : term.value),
+                                attributes: {
+                                    'aria-label': "".concat(title ? title : '', " item ").concat(idx + 1, " of ").concat(termsToShow.length, ", ").concat(term.value),
+                                },
+                            },
+                        };
+                        var termLang = (0, deepmerge_1.default)(defaultTermLang, props.lang || {});
+                        var mergedTermLang = (0, hooks_1.useLang)({ term: termLang.term }, {
+                            index: idx,
+                            numberOfTerms: termsToShow.length,
+                            term: term,
+                        });
+                        return ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('ss__terms__option', {
+                                'ss__terms__option--active': term.active,
+                            }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e, term); }, href: term.url.href }, (previewOnHover ? (0, toolbox_1.createHoverProps)(term.preview) : {}), (_a = mergedTermLang.term) === null || _a === void 0 ? void 0 : _a.all)) }));
+                    }) })] })) })) : null;
+});

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { ComponentProps, ListOption } from '../../../types';
+import type { VariantSelection as VariantSelectionType } from '@athoscommerce/snap-store-mobx';
+export declare const VariantSelection: ((properties: VariantSelectionProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type VariantSelectionProps = {
+    selection: VariantSelectionType;
+} & VariantSelectionTemplatesLegalProps & ComponentProps<VariantSelectionProps>;
+export type VariantSelectionTemplatesLegalProps = {
+    type?: 'dropdown' | 'swatches' | 'list';
+    onSelect?: (e: React.MouseEvent<HTMLElement, MouseEvent>, option: ListOption) => void;
+};
+//# sourceMappingURL=VariantSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariantSelection.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/VariantSelection/VariantSelection.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AA2D/F,eAAO,MAAM,gBAAgB,gBAAyB,qBAAqB;;CA+KzE,CAAC;AASH,MAAM,MAAM,qBAAqB,GAAG;IACnC,SAAS,EAAE,oBAAoB,CAAC;CAChC,GAAG,mCAAmC,GACtC,cAAc,CAAC,qBAAqB,CAAC,CAAC;AAEvC,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACtF,CAAC"}