@athoscommerce/snap-preact 1.0.0

package/dist/cjs/components/src/components/Organisms/Autocomplete/Autocomplete.js

@@ -0,0 +1,526 @@
+"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.Autocomplete = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var hooks_1 = require("preact/hooks");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var deepmerge_1 = __importDefault(require("deepmerge"));
+var snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+var Icon_1 = require("../../Atoms/Icon/Icon");
+var Results_1 = require("../Results");
+var Banner_1 = require("../../Atoms/Banner");
+var Facets_1 = require("../Facets");
+var utilities_1 = require("../../../utilities");
+var toolbox_1 = require("../../../toolbox");
+var providers_1 = require("../../../providers");
+var types_1 = require("../../../types");
+var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+var hooks_2 = require("../../../hooks");
+// import { useSnap } from '../../../providers';
+// import { useComponent } from '../../../hooks';
+// import { useCreateController } from '../../../hooks/useCreateController';
+// import type { RecommendationController } from '@athoscommerce/snap-controller';
+// import type { FunctionalComponent } from 'preact';
+// import type { SnapTemplates } from '../../../../../src';
+var defaultStyles = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var hideFacets = _a.hideFacets, horizontalTerms = _a.horizontalTerms, controller = _a.controller, input = _a.input, contentSlot = _a.contentSlot, viewportMaxHeight = _a.viewportMaxHeight, vertical = _a.vertical, width = _a.width, theme = _a.theme;
+    var inputViewportOffsetBottom = 0;
+    if (input) {
+        var elem = void 0;
+        if (typeof input === 'string') {
+            elem = document.querySelector(input);
+        }
+        else {
+            elem = input;
+        }
+        var rect = elem === null || elem === void 0 ? void 0 : elem.getBoundingClientRect();
+        inputViewportOffsetBottom = (rect === null || rect === void 0 ? void 0 : rect.bottom) || 0;
+    }
+    var noResults = Boolean(((_c = (_b = controller.store.search) === null || _b === void 0 ? void 0 : _b.query) === null || _c === void 0 ? void 0 : _c.string) && controller.store.results.length === 0);
+    return (0, react_1.css)({
+        '&, & *, & *:before, & *:after': {
+            boxSizing: 'border-box',
+        },
+        display: 'flex',
+        flexDirection: vertical ? 'column' : 'row',
+        flexWrap: horizontalTerms && !vertical ? 'wrap' : undefined,
+        position: 'absolute',
+        zIndex: '10002',
+        border: '1px solid #ebebeb',
+        background: '#ffffff',
+        width: width,
+        maxWidth: '100vw',
+        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? "calc(100vh - ".concat(inputViewportOffsetBottom + 10, "px)") : undefined,
+        overflowY: viewportMaxHeight && horizontalTerms && !vertical ? 'scroll' : undefined,
+        '.ss__autocomplete__close-button': {
+            color: '#c5c5c5',
+            fontSize: '.8em',
+        },
+        '.ss__autocomplete__close-button:focus': {
+            top: '0px !important',
+            left: '0px !important',
+            zIndex: '1',
+        },
+        '&.ss__autocomplete--only-terms': {
+            width: "".concat(vertical || horizontalTerms || Boolean(contentSlot) ? width : '150px'),
+        },
+        '.ss__autocomplete__title--trending, .ss__autocomplete__title--history, .ss__autocomplete__title--terms': {
+            fontWeight: 'normal',
+            margin: 0,
+            color: '#c5c5c5',
+            textTransform: 'uppercase',
+            padding: '10px',
+            h5: {
+                fontSize: '.8em',
+                margin: 0,
+            },
+        },
+        '.ss__autocomplete__title--facets': {
+            order: vertical ? 2 : undefined,
+        },
+        '.ss__autocomplete__terms': {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: "1 1 auto",
+            maxWidth: "".concat(vertical || horizontalTerms ? 'auto' : '150px'),
+            minWidth: '150px',
+            order: 1,
+            background: '#f8f8f8',
+            '.ss__autocomplete__terms__options': {
+                display: vertical || horizontalTerms ? 'flex' : undefined,
+                justifyContent: 'space-evenly',
+                flexWrap: 'wrap',
+                '.ss__autocomplete__terms__option': {
+                    flexGrow: vertical || horizontalTerms ? '1' : undefined,
+                    textAlign: vertical || horizontalTerms ? 'center' : undefined,
+                    wordBreak: 'break-all',
+                    a: {
+                        display: 'block',
+                        padding: vertical || horizontalTerms ? '10px 30px' : '10px',
+                        em: {
+                            fontStyle: 'normal',
+                        },
+                    },
+                    '&.ss__autocomplete__terms__option--active': {
+                        background: '#fff',
+                        a: {
+                            fontWeight: 'bold',
+                            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,
+                        },
+                    },
+                },
+            },
+        },
+        '.ss__autocomplete__facets': {
+            display: 'flex',
+            flex: "0 0 150px",
+            flexDirection: vertical ? 'row' : 'column',
+            columnGap: '20px',
+            order: 2,
+            padding: vertical ? '10px 20px' : '10px',
+            overflowY: vertical ? undefined : 'auto',
+            '.ss__facets': {
+                display: 'flex',
+                flexDirection: vertical ? 'row' : 'column',
+                columnGap: '20px',
+            },
+            '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--filtered~.ss__facet-hierarchy-options__option:not(.ss__facet-hierarchy-options__option--filtered)': {
+                paddingLeft: 0,
+            },
+            '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--filtered:hover': {
+                cursor: 'pointer',
+            },
+            '.ss__facet-palette-options__icon': {
+                display: 'none',
+            },
+        },
+        '.ss__autocomplete__content': {
+            display: 'flex',
+            flex: "1 1 ".concat(hideFacets ? 'auto' : '0%'),
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            order: 3,
+            overflowY: 'auto',
+            margin: noResults ? '0 auto' : undefined,
+            padding: vertical ? '10px 20px' : '10px',
+            '.ss__banner.ss__banner--header, .ss__banner.ss__banner--banner': {
+                marginBottom: '10px',
+            },
+            '.ss__banner.ss__banner--footer': {
+                margin: '10px 0',
+            },
+            '.ss__autocomplete__content__results': {
+                minHeight: '0%',
+            },
+            '.ss__autocomplete__content__info': {
+                padding: '10px',
+                textAlign: noResults ? 'center' : 'right',
+                a: {
+                    fontWeight: 'bold',
+                    color: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary,
+                    '.ss__icon': {
+                        marginLeft: '5px',
+                    },
+                },
+            },
+        },
+    });
+};
+exports.Autocomplete = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var globalTheme = (0, providers_1.useTheme)();
+    var globalTreePath = (0, providers_1.useTreePath)();
+    var defaultProps = {
+        termsTitle: '',
+        trendingTitle: 'Popular Searches',
+        historyTitle: 'Previously Searched',
+        facetsTitle: '',
+        contentTitle: '',
+        width: '100%',
+        seeMoreButtonIcon: 'angle-right',
+        treePath: globalTreePath,
+    };
+    var props = (0, utilities_1.mergeProps)('autocomplete', globalTheme, defaultProps, properties);
+    var valueProps = (0, toolbox_1.createHoverProps)();
+    var facetClickEvent = function (e) {
+        properties.onFacetOptionClick && properties.onFacetOptionClick(e);
+        // 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 termClickEvent = function (e) {
+        properties.onTermClick && properties.onTermClick(e);
+        // 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 themeFunctionalityProps = {
+        components: {
+            facet: {
+                valueProps: valueProps,
+                previewOnFocus: true,
+            },
+            facetGridOptions: {
+                onClick: facetClickEvent,
+            },
+            facetHierarchyOptions: {
+                onClick: facetClickEvent,
+            },
+            facetListOptions: {
+                onClick: facetClickEvent,
+            },
+            facetPaletteOptions: {
+                onClick: facetClickEvent,
+            },
+        },
+    };
+    if (!(globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.name)) {
+        // breakpoint settings are calculated in ThemeStore for snap templates
+        props.breakpoints = props.breakpoints || {
+            0: {
+                columns: 2,
+                rows: 1,
+                hideFacets: (_a = props.hideFacets) !== null && _a !== void 0 ? _a : true,
+                vertical: (_b = props.vertical) !== null && _b !== void 0 ? _b : true,
+                hideHistory: (_c = props.hideHistory) !== null && _c !== void 0 ? _c : true,
+                hideTrending: (_d = props.hideTrending) !== null && _d !== void 0 ? _d : true,
+            },
+            540: {
+                columns: 3,
+                rows: 1,
+                vertical: (_e = props.vertical) !== null && _e !== void 0 ? _e : true,
+                hideHistory: (_f = props.hideHistory) !== null && _f !== void 0 ? _f : true,
+                hideTrending: (_g = props.hideTrending) !== null && _g !== void 0 ? _g : true,
+            },
+            768: {
+                columns: 2,
+                rows: 3,
+            },
+        };
+        var themeDefaults = {
+            components: {
+                facet: {
+                    limit: 6,
+                    disableOverflow: true,
+                    disableCollapse: true,
+                },
+                facetGridOptions: {
+                    columns: 3,
+                },
+                facetHierarchyOptions: {
+                    hideCount: true,
+                },
+                facetListOptions: {
+                    hideCheckbox: true,
+                    hideCount: true,
+                },
+                facetPaletteOptions: {
+                    hideLabel: true,
+                    columns: 3,
+                },
+                result: {
+                    hideBadge: true,
+                    hideVariantSelections: true,
+                },
+            },
+        };
+        var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints) || {};
+        // merge deeply the themeDefaults with the theme props and the displaySettings theme props (do not merge arrays, but replace them)
+        var theme = deepmerge_1.default.all([themeDefaults, themeFunctionalityProps, (props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}], {
+            arrayMerge: function (destinationArray, sourceArray) { return sourceArray; },
+        });
+        props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
+    }
+    else {
+        // snap templates
+        props.theme = deepmerge_1.default.all([themeFunctionalityProps, (props === null || props === void 0 ? void 0 : props.theme) || {}], { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
+    }
+    var input = props.input;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+    }
+    var hideTerms = props.hideTerms, hideFacets = props.hideFacets, hideContent = props.hideContent, hideBanners = props.hideBanners, hideLink = props.hideLink, hideHistory = props.hideHistory, hideTrending = props.hideTrending, retainTrending = props.retainTrending, retainHistory = props.retainHistory, vertical = props.vertical, termsTitle = props.termsTitle, trendingTitle = props.trendingTitle, historyTitle = props.historyTitle, facetsTitle = props.facetsTitle, contentTitle = props.contentTitle, termsSlot = props.termsSlot, facetsSlot = props.facetsSlot, contentSlot = props.contentSlot, resultsSlot = props.resultsSlot, noResultsSlot = props.noResultsSlot, linkSlot = props.linkSlot, resultComponent = props.resultComponent, onTermClick = props.onTermClick, seeMoreButtonText = props.seeMoreButtonText, seeMoreButtonIcon = props.seeMoreButtonIcon, 
+    // templates,
+    disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, controller = props.controller, treePath = props.treePath;
+    var subProps = {
+        facets: __assign(__assign({ 
+            // default props
+            limit: 3 }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { theme: props.theme, treePath: treePath }),
+        banner: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__autocomplete__banner', controller: controller }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        results: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__autocomplete__results', breakpoints: props.breakpoints, resultComponent: resultComponent }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__autocomplete__icon', size: '10px' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: treePath }),
+    };
+    var _x = controller.store, search = _x.search, terms = _x.terms, trending = _x.trending, results = _x.results, merchandising = _x.merchandising, pagination = _x.pagination, loaded = _x.loaded, filters = _x.filters, facets = _x.facets, state = _x.state, loading = _x.loading;
+    var history = controller.store.history || [];
+    // you can pass in a selector or the actual input element,
+    // if its the selector, we need to bind it to the controller here.
+    if (controller && typeof input == 'string') {
+        input = document.querySelector(input);
+        // only bind on componentdidmount
+        (0, hooks_1.useEffect)(function () {
+            controller.bind();
+        }, []);
+    }
+    var visible = Boolean(input === state.focusedInput) &&
+        (terms.length > 0 || (trending === null || trending === void 0 ? void 0 : trending.length) > 0 || (history === null || history === void 0 ? void 0 : history.length) > 0 || (state.input && controller.store.loaded));
+    var trendingActive = trending === null || trending === void 0 ? void 0 : trending.filter(function (term) { return term.active; }).pop();
+    var historyActive = history === null || history === void 0 ? void 0 : history.filter(function (term) { return term.active; }).pop();
+    var showTrending = false;
+    if ((trending === null || trending === void 0 ? void 0 : trending.length) && ((retainTrending && controller.store.loaded) || (!results.length && !state.input))) {
+        showTrending = true;
+    }
+    var showHistory = false;
+    if ((history === null || history === void 0 ? void 0 : history.length) && ((retainHistory && controller.store.loaded) || (!results.length && !state.input))) {
+        showHistory = true;
+    }
+    if (!state.input && (historyActive || trendingActive)) {
+        if (history === null || history === void 0 ? void 0 : history.length)
+            showHistory = true;
+        if (trending === null || trending === void 0 ? void 0 : trending.length)
+            showTrending = true;
+    }
+    var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
+    var onlyTerms = ((trending === null || trending === void 0 ? void 0 : trending.length) || history.length) && !loaded && !loading;
+    // results logic
+    var showResults = Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_h = search === null || search === void 0 ? void 0 : search.query) === null || _h === void 0 ? void 0 : _h.string));
+    if ((hideTrending && trendingActive) || (hideHistory && historyActive)) {
+        showResults = false;
+    }
+    var noResults = Boolean(((_j = search === null || search === void 0 ? void 0 : search.query) === null || _j === void 0 ? void 0 : _j.string) && results.length === 0);
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var reset = function () {
+        controller.setFocused();
+    };
+    // TODO: move to new Autocomplete component
+    // let recommendationTemplateComponent: (() => FunctionalComponent<{ controller: RecommendationController }>) | undefined;
+    // let recsController: RecommendationController | undefined;
+    // if (templates?.recommendation?.template) {
+    // 	const snap = useSnap() as SnapTemplate	s;
+    // 	const mergedConfig = Object.assign(
+    // 		{
+    // 			id: 'trending',
+    // 			tag: 'trending',
+    // 			branch: 'production',
+    // 		},
+    // 		templates.recommendation!.config
+    // 	);
+    // 	if(snap) {
+    // 		recsController = useCreateController<RecommendationController>(snap, 'recommendation', mergedConfig);
+    // 		if (!recsController?.store?.loaded && recsController?.store.error?.type !== 'error') {
+    // 			recsController?.search();
+    // 		}
+    // 		recommendationTemplateComponent = useComponent(snap, templates.recommendation!.template);
+    // 	}
+    // }
+    // const RecommendationTemplateComponent = recommendationTemplateComponent as unknown as FunctionalComponent<{ controller: RecommendationController }>;
+    var defaultSeeMoreButtonText = seeMoreButtonText
+        ? typeof seeMoreButtonText == 'function'
+            ? seeMoreButtonText(controller)
+            : seeMoreButtonText
+        : "See ".concat(pagination.totalResults, " ").concat(filters.length > 0 ? 'filtered' : '', " result").concat(pagination.totalResults == 1 ? '' : 's', " for \"").concat((_k = search.query) === null || _k === void 0 ? void 0 : _k.string, "\"");
+    //initialize lang
+    var defaultLang = {
+        trendingTitle: {
+            value: trendingTitle,
+        },
+        termsTitle: {
+            value: termsTitle,
+        },
+        contentTitle: {
+            value: contentTitle,
+        },
+        historyTitle: {
+            value: historyTitle,
+        },
+        closeButton: {
+            value: 'Close Autocomplete',
+            attributes: {
+                'aria-label': 'close autocomplete',
+            },
+        },
+        facetsTitle: {
+            value: facetsTitle,
+        },
+        noResultsText: {
+            value: "<p>No results found for \"".concat(((_l = search.originalQuery) === null || _l === void 0 ? void 0 : _l.string) || ((_m = search.query) === null || _m === void 0 ? void 0 : _m.string), "\".</p><p>Please try another search.</p>"),
+        },
+        seeMoreButton: {
+            value: defaultSeeMoreButtonText,
+        },
+    };
+    //deep merge with props.lang
+    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    var mergedLang = (0, hooks_2.useLang)(lang, {
+        controller: controller,
+    });
+    return visible ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete', className, internalClassName, {
+                'ss__autocomplete--only-terms': onlyTerms,
+                'ss__autocomplete--vertical': vertical,
+                'ss__autocomplete--no-results': noResults,
+            }), onClick: function (e) { return e.stopPropagation(); }, ref: function (e) { return (0, hooks_2.useA11y)(e, 0, true, reset); }, children: [(0, jsx_runtime_1.jsx)("span", __assign({ role: 'link', ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function () { return reset(); }, className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' } }, (_o = mergedLang.closeButton) === null || _o === void 0 ? void 0 : _o.all)), !hideTerms && (showTrending || terms.length > 0 || termsSlot || (!hideHistory && history.length > 0)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms', { 'ss__autocomplete__terms-trending': showTrending }), children: termsSlot ? ((0, utilities_1.cloneWithProps)(termsSlot, {
+                        terms: terms,
+                        trending: trending,
+                        termsTitle: termsTitle,
+                        trendingTitle: trendingTitle,
+                        showTrending: showTrending,
+                        history: history,
+                        historyTitle: historyTitle,
+                        valueProps: valueProps,
+                        emIfy: emIfy,
+                        onTermClick: onTermClick,
+                        controller: controller,
+                        treePath: treePath,
+                    })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [terms.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__suggestions", children: [termsTitle || lang.termsTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--terms ss__autocomplete__title--suggestions", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_p = mergedLang.termsTitle) === null || _p === void 0 ? void 0 : _p.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": termsTitle, children: terms.map(function (term, idx) {
+                                            var _a;
+                                            //initialize lang
+                                            var defaultLang = {
+                                                suggestionsTerm: {
+                                                    attributes: {
+                                                        'aria-label': "item ".concat(idx + 1, " of ").concat(terms.length, ", ").concat(term.value),
+                                                    },
+                                                },
+                                            };
+                                            //deep merge with props.lang
+                                            var suggestionLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                            var suggestionTermLangObj = (0, hooks_2.useLang)(suggestionLang, {
+                                                controller: controller,
+                                                term: term,
+                                                index: idx,
+                                            });
+                                            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
+                                                    'ss__autocomplete__terms__option--active': term.active,
+                                                }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = suggestionTermLangObj.suggestionsTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
+                                        }) })] })) : null, showTrending && !hideTrending ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__trending", children: [trendingTitle || lang.trendingTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--trending", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_q = mergedLang.trendingTitle) === null || _q === void 0 ? void 0 : _q.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": trendingTitle, children: trending.map(function (term, idx) {
+                                            var _a;
+                                            //initialize lang
+                                            var defaultLang = {
+                                                trendingTerm: {
+                                                    attributes: {
+                                                        'aria-label': "item ".concat(idx + 1, " of ").concat(trending.length, ", ").concat(term.value),
+                                                    },
+                                                },
+                                            };
+                                            //deep merge with props.lang
+                                            var trendingLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                            var trendingTermLangObj = (0, hooks_2.useLang)(trendingLang, {
+                                                controller: controller,
+                                                term: term,
+                                                index: idx,
+                                            });
+                                            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
+                                                    'ss__autocomplete__terms__option--active': term.active,
+                                                }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = trendingTermLangObj.trendingTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
+                                        }) })] })) : null, showHistory && !hideHistory ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__terms__history", children: [historyTitle || lang.historyTitle.value ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__title ss__autocomplete__title--history", children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_r = mergedLang.historyTitle) === null || _r === void 0 ? void 0 : _r.all)) })) : null, (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__terms__options", role: 'list', "aria-label": historyTitle, children: history.map(function (term, idx) {
+                                            var _a;
+                                            //initialize lang
+                                            var defaultLang = {
+                                                historyTerm: {
+                                                    attributes: {
+                                                        'aria-label': "item ".concat(idx + 1, " of ").concat(history.length, ", ").concat(term.value),
+                                                    },
+                                                },
+                                            };
+                                            //deep merge with props.lang
+                                            var historyLang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                                            var historyTermLangObj = (0, hooks_2.useLang)(historyLang, {
+                                                controller: controller,
+                                                term: term,
+                                                index: idx,
+                                            });
+                                            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms__option', {
+                                                    'ss__autocomplete__terms__option--active': term.active,
+                                                }), children: (0, jsx_runtime_1.jsx)("a", __assign({ onClick: function (e) { return termClickEvent(e); }, href: term.url.href }, (0, toolbox_1.createHoverProps)(term.preview), { role: "link" }, (_a = historyTermLangObj.historyTerm) === null || _a === void 0 ? void 0 : _a.all, { children: emIfy(term.value, state.input || '') })) }));
+                                        }) })] })) : null] })) })), !hideFacets &&
+                    (facetsSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__facets", children: (0, utilities_1.cloneWithProps)(facetsSlot, { facets: facetsToShow, merchandising: merchandising, facetsTitle: facetsTitle, hideBanners: hideBanners, controller: controller, valueProps: valueProps, treePath: treePath }) })) : (facetsToShow.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(facetsTitle || lang.facetsTitle.value) && vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_s = mergedLang.facetsTitle) === null || _s === void 0 ? void 0 : _s.all)) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(facetsTitle || lang.facetsTitle.value) && !vertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--facets'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_t = mergedLang.facetsTitle) === null || _t === void 0 ? void 0 : _t.all)) })) : null, (0, jsx_runtime_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' })) : null] })] })))), !hideContent ? (contentSlot ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, utilities_1.cloneWithProps)(contentSlot, { results: results, merchandising: merchandising, search: search, pagination: pagination, filters: filters, controller: controller, treePath: treePath }) })) : showResults ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' })) : null, !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' })) : null, results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__results", children: resultsSlot ? ((0, utilities_1.cloneWithProps)(resultsSlot, { results: results, contentTitle: contentTitle, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(contentTitle || lang.contentTitle.value) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__title', 'ss__autocomplete__title--content'), children: (0, jsx_runtime_1.jsx)("h5", __assign({}, (_u = mergedLang.contentTitle) === null || _u === void 0 ? void 0 : _u.all)) })) : null, (0, jsx_runtime_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller }))] })) })) : ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results", children: noResultsSlot ? ((0, utilities_1.cloneWithProps)(noResultsSlot, { search: search, pagination: pagination, controller: controller, treePath: treePath })) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__autocomplete__content__no-results__text" }, (_v = mergedLang.noResultsText) === null || _v === void 0 ? void 0 : _v.all))) })), !hideBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' })) : null, !hideLink ? (linkSlot ? ((0, utilities_1.cloneWithProps)(linkSlot, { search: search, results: results, pagination: pagination, filters: filters, controller: controller, treePath: treePath })) : ((_w = search === null || search === void 0 ? void 0 : search.query) === null || _w === void 0 ? void 0 : _w.string) && results.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__info", children: (0, jsx_runtime_1.jsxs)("a", __assign({ href: state.url.href, onClick: function () { return (controller === null || controller === void 0 ? void 0 : controller.setFocused) && controller.setFocused(); } }, mergedLang.seeMoreButton.attributes, { children: [(0, jsx_runtime_1.jsx)("span", __assign({}, mergedLang.seeMoreButton.value)), (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof seeMoreButtonIcon == 'string' ? { icon: seeMoreButtonIcon } : seeMoreButtonIcon)))] })) })) : null) : null] }) })) : null) : null] })) })) : null;
+});
+var emIfy = 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMatch ? (0, jsx_runtime_1.jsx)("em", { children: beforeMatch }) : '', search, afterMatch ? (0, jsx_runtime_1.jsx)("em", { children: afterMatch }) : ''] }));
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("em", { children: term }) }));
+};
+var escapeRegExp = function (string) {
+    return string === null || string === void 0 ? void 0 : string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};

package/dist/cjs/components/src/components/Organisms/Autocomplete/index.d.ts

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

package/dist/cjs/components/src/components/Organisms/Autocomplete/index.d.ts.map

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

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

package/dist/cjs/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.d.ts

@@ -0,0 +1,61 @@
+import type { AutocompleteController, RecommendationControllerConfig } from '@athoscommerce/snap-controller';
+import { ComponentProps, RecommendationComponentNames, ResultComponent } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const AutocompleteLayout: ((properties: AutocompleteLayoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type ModuleNames = 'termsList' | 'terms.history' | 'terms.trending' | 'terms.suggestions' | 'facets' | 'facetsHorizontal' | 'button.see-more' | 'content' | 'no-results' | '_' | 'banner.left' | 'banner.banner' | 'banner.footer' | 'banner.header';
+type ColumnsNames = 'c1' | 'c2' | 'c3' | 'c4';
+type PrebuiltLayouts = 'terms' | 'mini' | 'standard';
+type ModuleNamesWithColumns = ModuleNames | ColumnsNames | ModuleNames[] | ColumnsNames[];
+type Column = {
+    layout: ModuleNames[][] | ModuleNames[];
+    width: string | 'auto';
+    alignContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between';
+};
+export type AutocompleteLayoutProps = {
+    input: Element | string;
+    resultComponent?: ResultComponent;
+    controller: AutocompleteController;
+    lang?: Partial<AutocompleteLayoutLang>;
+} & AutocompleteLayoutTemplatesLegalProps & ComponentProps<AutocompleteLayoutProps>;
+export type AutocompleteLayoutTemplatesLegalProps = {
+    layout?: ModuleNamesWithColumns[] | PrebuiltLayouts;
+    column1?: Column;
+    column2?: Column;
+    column3?: Column;
+    column4?: Column;
+    facetsTitle?: string;
+    contentTitle?: string;
+    excludeBanners?: boolean;
+    viewportMaxHeight?: boolean;
+    width?: string;
+    onReset?: () => void;
+    templates?: {
+        recommendation?: {
+            enabled: boolean;
+            component?: RecommendationComponentNames;
+            resultComponent?: string;
+            config?: Partial<RecommendationControllerConfig>;
+        };
+    };
+};
+export interface AutocompleteLayoutLang {
+    facetsTitle: Lang<{
+        controller: AutocompleteController;
+    }>;
+    contentTitle: Lang<{
+        controller: AutocompleteController;
+    }>;
+    closeButton: Lang<{
+        controller: AutocompleteController;
+    }>;
+    noResultsText: Lang<{
+        controller: AutocompleteController;
+    }>;
+    seeMoreButton: Lang<{
+        controller: AutocompleteController;
+    }>;
+}
+export {};
+//# sourceMappingURL=AutocompleteLayout.d.ts.map

package/dist/cjs/components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteLayout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/AutocompleteLayout/AutocompleteLayout.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,sBAAsB,EAA4B,8BAA8B,EAAE,MAAM,gCAAgC,CAAC;AASvI,OAAO,EACN,cAAc,EAEd,4BAA4B,EAE5B,eAAe,EAEf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AA4KxD,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CAokB7E,CAAC;AAcH,MAAM,MAAM,WAAW,GACpB,WAAW,GACX,eAAe,GACf,gBAAgB,GAChB,mBAAmB,GACnB,QAAQ,GACR,kBAAkB,GAClB,iBAAiB,GACjB,SAAS,GACT,YAAY,GACZ,GAAG,GACH,aAAa,GACb,eAAe,GACf,eAAe,GACf,eAAe,CAAC;AACnB,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,KAAK,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACrD,KAAK,sBAAsB,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,YAAY,EAAE,CAAC;AAE1F,KAAK,MAAM,GAAG;IACb,MAAM,EAAE,WAAW,EAAE,EAAE,GAAG,WAAW,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,EAAE,sBAAsB,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;CACvC,GAAG,qCAAqC,GACxC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IACnD,MAAM,CAAC,EAAE,sBAAsB,EAAE,GAAG,eAAe,CAAC;IAEpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE;QACX,cAAc,CAAC,EAAE;YAChB,OAAO,EAAE,OAAO,CAAC;YACjB,SAAS,CAAC,EAAE,4BAA4B,CAAC;YACzC,eAAe,CAAC,EAAE,MAAM,CAAC;YACzB,MAAM,CAAC,EAAE,OAAO,CAAC,8BAA8B,CAAC,CAAC;SACjD,CAAC;KACF,CAAC;CACF,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACtC,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,YAAY,EAAE,IAAI,CAAC;QAClB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,WAAW,EAAE,IAAI,CAAC;QACjB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;IACH,aAAa,EAAE,IAAI,CAAC;QACnB,UAAU,EAAE,sBAAsB,CAAC;KACnC,CAAC,CAAC;CACH"}