@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

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

@@ -1,77 +1,64 @@
 "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.AutocompleteLayout = 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 hooks_2 = require("../../../hooks");
-var TermsList_1 = require("../TermsList");
-var Terms_1 = require("../../Molecules/Terms");
-var FacetsHorizontal_1 = require("../FacetsHorizontal");
-var Button_1 = require("../../Atoms/Button");
-var createRecommendationTemplate_1 = require("../../../hooks/createRecommendationTemplate");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e;
-    var controller = _a.controller, input = _a.input, viewportMaxHeight = _a.viewportMaxHeight, width = _a.width, theme = _a.theme, column1 = _a.column1, column2 = _a.column2, column3 = _a.column3, column4 = _a.column4;
-    var inputViewportOffsetBottom = 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+const Icon_1 = require("../../Atoms/Icon/Icon");
+const Results_1 = require("../Results");
+const Banner_1 = require("../../Atoms/Banner");
+const Facets_1 = require("../Facets");
+const utilities_1 = require("../../../utilities");
+const toolbox_1 = require("../../../toolbox");
+const providers_1 = require("../../../providers");
+const types_1 = require("../../../types");
+const hooks_2 = require("../../../hooks");
+const TermsList_1 = require("../TermsList");
+const Terms_1 = require("../../Molecules/Terms");
+const FacetsHorizontal_1 = require("../FacetsHorizontal");
+const Button_1 = require("../../Atoms/Button");
+const createRecommendationTemplate_1 = require("../../../hooks/createRecommendationTemplate");
+const defaultStyles = ({ controller, input, viewportMaxHeight, width, theme, column1, column2, column3, column4, }) => {
+    let inputViewportOffsetBottom = 0;
     if (input) {
-        var elem = void 0;
+        let elem;
         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;
+        const rect = elem?.getBoundingClientRect();
+        inputViewportOffsetBottom = 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);
+    const noResults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
     return (0, react_1.css)({
         '.ss__autocomplete__column.ss__autocomplete__column--c1': {
-            flex: (column1 === null || column1 === void 0 ? void 0 : column1.width) == 'auto' ? '1 1 auto' : "1 0 ".concat(column1 === null || column1 === void 0 ? void 0 : column1.width),
-            maxWidth: (column1 === null || column1 === void 0 ? void 0 : column1.width) == 'auto' ? 'auto' : column1 === null || column1 === void 0 ? void 0 : column1.width,
-            alignContent: column1 === null || column1 === void 0 ? void 0 : column1.alignContent,
+            flex: column1?.width == 'auto' ? '1 1 auto' : `1 0 ${column1?.width}`,
+            maxWidth: column1?.width == 'auto' ? 'auto' : column1?.width,
+            alignContent: column1?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c2': {
-            flex: (column2 === null || column2 === void 0 ? void 0 : column2.width) == 'auto' ? '1 1 auto' : "1 0 ".concat(column2 === null || column2 === void 0 ? void 0 : column2.width),
-            maxWidth: (column2 === null || column2 === void 0 ? void 0 : column2.width) == 'auto' ? 'auto' : column2 === null || column2 === void 0 ? void 0 : column2.width,
-            alignContent: column2 === null || column2 === void 0 ? void 0 : column2.alignContent,
+            flex: column2?.width == 'auto' ? '1 1 auto' : `1 0 ${column2?.width}`,
+            maxWidth: column2?.width == 'auto' ? 'auto' : column2?.width,
+            alignContent: column2?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c3': {
-            flex: (column3 === null || column3 === void 0 ? void 0 : column3.width) == 'auto' ? '1 1 auto' : "1 0 ".concat(column3 === null || column3 === void 0 ? void 0 : column3.width),
-            maxWidth: (column3 === null || column3 === void 0 ? void 0 : column3.width) == 'auto' ? 'auto' : column3 === null || column3 === void 0 ? void 0 : column3.width,
-            alignContent: column3 === null || column3 === void 0 ? void 0 : column3.alignContent,
+            flex: column3?.width == 'auto' ? '1 1 auto' : `1 0 ${column3?.width}`,
+            maxWidth: column3?.width == 'auto' ? 'auto' : column3?.width,
+            alignContent: column3?.alignContent,
         },
         '.ss__autocomplete__column.ss__autocomplete__column--c4': {
-            flex: (column4 === null || column4 === void 0 ? void 0 : column4.width) == 'auto' ? '1 1 auto' : "1 0 ".concat(column4 === null || column4 === void 0 ? void 0 : column4.width),
-            maxWidth: (column4 === null || column4 === void 0 ? void 0 : column4.width) == 'auto' ? 'auto' : column4 === null || column4 === void 0 ? void 0 : column4.width,
-            alignContent: column4 === null || column4 === void 0 ? void 0 : column4.alignContent,
+            flex: column4?.width == 'auto' ? '1 1 auto' : `1 0 ${column4?.width}`,
+            maxWidth: column4?.width == 'auto' ? 'auto' : column4?.width,
+            alignContent: column4?.alignContent,
         },
         '.ss__autocomplete__column, .ss__autocomplete__row': {
             minWidth: 0,
@@ -87,7 +74,7 @@ var defaultStyles = function (_a) {
         border: '1px solid #ebebeb',
         background: '#ffffff',
         maxWidth: width,
-        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? "calc(100vh - ".concat(inputViewportOffsetBottom + 10, "px)") : undefined,
+        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? `calc(100vh - ${inputViewportOffsetBottom + 10}px)` : undefined,
         overflowY: 'scroll',
         '.ss__autocomplete__row': {
             display: 'flex',
@@ -146,7 +133,7 @@ var defaultStyles = function (_a) {
         },
         '.ss__autocomplete__content': {
             display: 'flex',
-            flex: "1 1 0%",
+            flex: `1 1 0%`,
             flexDirection: 'column',
             justifyContent: 'space-between',
             overflowY: 'auto',
@@ -176,7 +163,7 @@ var defaultStyles = function (_a) {
             textAlign: noResults ? 'center' : 'right',
             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,
+                color: theme?.variables?.colors?.primary,
                 '.ss__icon': {
                     marginLeft: '5px',
                 },
@@ -184,10 +171,9 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var globalTheme = (0, providers_1.useTheme)();
-    var defaultProps = {
+exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const defaultProps = {
         facetsTitle: '',
         contentTitle: '',
         layout: [['c1', 'c2', 'c3']],
@@ -211,7 +197,7 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (propertie
             },
         },
     };
-    var props = (0, utilities_1.mergeProps)('autocompleteLayout', globalTheme, defaultProps, properties);
+    let props = (0, utilities_1.mergeProps)('autocompleteLayout', globalTheme, defaultProps, properties);
     delete props.treePath;
     if (props.layout == 'terms') {
         props.templates = {
@@ -220,15 +206,15 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (propertie
             },
         };
     }
-    var valueProps = (0, toolbox_1.createHoverProps)();
-    var facetClickEvent = function () {
+    const valueProps = (0, toolbox_1.createHoverProps)();
+    const facetClickEvent = () => {
         // 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());
+        controller?.setFocused && controller?.setFocused();
     };
-    var themeFunctionalityProps = {
+    const themeFunctionalityProps = {
         components: {
             facet: {
-                valueProps: valueProps,
+                valueProps,
             },
             facetGridOptions: {
                 onClick: facetClickEvent,
@@ -244,8 +230,8 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (propertie
             },
         },
     };
-    if (!((globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) === 'templates')) {
-        var themeDefaults = {
+    if (!(globalTheme?.type === 'templates')) {
+        const themeDefaults = {
             components: {
                 facet: {
                     limit: 6,
@@ -276,90 +262,145 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (propertie
             },
         };
         // 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) || {}], {
-            arrayMerge: function (destinationArray, sourceArray) { return sourceArray; },
+        const theme = deepmerge_1.default.all([themeDefaults, themeFunctionalityProps, props?.theme || {}], {
+            arrayMerge: (destinationArray, sourceArray) => sourceArray,
         });
-        props = __assign(__assign({}, props), { theme: theme });
+        props = {
+            ...props,
+            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; } });
+        props.theme = deepmerge_1.default.all([themeFunctionalityProps, props?.theme || {}], { arrayMerge: (destinationArray, sourceArray) => sourceArray });
     }
-    var input = props.input;
+    let input = props.input;
     if (input) {
         if (typeof input === 'string') {
             input = document.querySelector(input);
         }
     }
-    var facetsTitle = props.facetsTitle, contentTitle = props.contentTitle, column1 = props.column1, column2 = props.column2, column3 = props.column3, column4 = props.column4, onReset = props.onReset, excludeBanners = props.excludeBanners, resultComponent = props.resultComponent, templates = props.templates, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, controller = props.controller;
-    var layout = props.layout;
-    var subProps = {
-        button: __assign(__assign({ internalClassName: 'ss__autocomplete__button--see-more', 
+    const { facetsTitle, contentTitle, column1, column2, column3, column4, onReset, excludeBanners, resultComponent, templates, disableStyles, className, internalClassName, controller, } = props;
+    let layout = props.layout;
+    const subProps = {
+        button: {
+            internalClassName: 'ss__autocomplete__button--see-more',
             // default props
-            onClick: function () {
-                (controller === null || controller === void 0 ? void 0 : controller.setFocused) && controller.setFocused();
+            onClick: () => {
+                controller?.setFocused && controller.setFocused();
                 window.location.href = state.url.href;
-            }, name: 'see-more' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: properties.treePath }),
-        termsList: __assign(__assign({ internalClassName: 'ss__autocomplete__terms-list', verticalOptions: props.layout == 'terms' || props.layout == 'mobile' ? false : true, 
+            },
+            name: 'see-more',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
+        termsList: {
+            internalClassName: 'ss__autocomplete__terms-list',
+            verticalOptions: props.layout == 'terms' || props.layout == 'mobile' ? false : true,
             // default props
-            controller: controller }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: properties.treePath }),
-        terms: __assign(__assign({ internalClassName: 'ss__autocomplete__terms', vertical: props.layout == 'terms' || props.layout == 'mobile' ? false : true, 
+            controller: controller,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
+        terms: {
+            internalClassName: 'ss__autocomplete__terms',
+            vertical: props.layout == 'terms' || props.layout == 'mobile' ? false : true,
             // default props
-            controller: controller }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: properties.treePath }),
-        facets: __assign(__assign({ name: 'autocomplete', 
+            controller: controller,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
+        facets: {
+            name: 'autocomplete',
             // default props
-            limit: 3 }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: properties.treePath }),
-        facetsHorizontal: __assign(__assign({ name: 'autocomplete' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { theme: props.theme, treePath: properties.treePath }),
-        banner: __assign(__assign({ 
+            limit: 3,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
+        facetsHorizontal: {
+            name: 'autocomplete',
+            // default props
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
+        banner: {
             // default props
-            internalClassName: 'ss__autocomplete__banner' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__autocomplete__banner',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: properties.treePath }),
-        results: __assign(__assign({ columns: 3, rows: 2, excludeBanners: excludeBanners, 
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
+        results: {
+            columns: 3,
+            rows: 2,
+            excludeBanners,
             // default props
-            internalClassName: 'ss__autocomplete__results', resultComponent: resultComponent }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__autocomplete__results',
+            resultComponent: resultComponent,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: properties.treePath }),
-        icon: __assign(__assign({ 
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
+        icon: {
             // default props
-            internalClassName: 'ss__autocomplete__icon', icon: 'angle-right', size: '10px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__autocomplete__icon',
+            icon: 'angle-right',
+            size: '10px',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: properties.treePath }),
+            theme: props.theme,
+            treePath: properties.treePath,
+        },
     };
-    var _h = controller.store, search = _h.search, terms = _h.terms, trending = _h.trending, results = _h.results, merchandising = _h.merchandising, pagination = _h.pagination, filters = _h.filters, facets = _h.facets, state = _h.state, loading = _h.loading, loaded = _h.loaded;
-    var history = controller.store.history || [];
+    const { search, terms, trending, results, merchandising, pagination, filters, facets, state, loading, loaded } = controller.store;
+    const 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 () {
+        (0, hooks_1.useEffect)(() => {
             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 showResultsBool = function () { var _a; return Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || ((_a = search === null || search === void 0 ? void 0 : search.query) === null || _a === void 0 ? void 0 : _a.string) || loading); };
-    var _j = (0, hooks_1.useState)(showResultsBool()), showResults = _j[0], setShowResults = _j[1];
-    var checkAndSetShowResults = function () {
-        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();
+    const visible = Boolean(input === state.focusedInput) &&
+        (terms.length > 0 || trending?.length > 0 || history?.length > 0 || (state.input && controller.store.loaded));
+    const showResultsBool = () => Boolean(results.length > 0 || Object.keys(merchandising.content).length > 0 || search?.query?.string || loading);
+    const [showResults, setShowResults] = (0, hooks_1.useState)(showResultsBool());
+    const checkAndSetShowResults = () => {
+        const trendingActive = trending?.filter((term) => term.active).pop();
+        const historyActive = history?.filter((term) => term.active).pop();
         if (trendingActive || historyActive || showResultsBool()) {
             setShowResults(true);
         }
@@ -367,15 +408,15 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (propertie
             setShowResults(false);
         }
     };
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         checkAndSetShowResults();
     }, [trending, history]);
-    var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
+    const facetsToShow = facets.length ? facets.filter((facet) => facet.display !== types_1.FacetDisplay.SLIDER) : [];
     // results logic
     checkAndSetShowResults();
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         contentTitle: {
             value: contentTitle,
         },
@@ -389,114 +430,113 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (propertie
             value: facetsTitle,
         },
         noResultsText: {
-            value: "<p>No results found for \"".concat(((_a = search.originalQuery) === null || _a === void 0 ? void 0 : _a.string) || ((_b = search.query) === null || _b === void 0 ? void 0 : _b.string), "\".</p><p>Please try another search.</p>"),
+            value: `<p>No results found for "${search.originalQuery?.string || search.query?.string}".</p><p>Please try another search.</p>`,
         },
         seeMoreButton: {
-            value: "See ".concat(pagination.totalResults, " ").concat(filters.length > 0 ? 'filtered' : '', " result").concat(pagination.totalResults == 1 ? '' : 's', " for \"").concat((_c = search.query) === null || _c === void 0 ? void 0 : _c.string, "\""),
+            value: `See ${pagination.totalResults} ${filters.length > 0 ? 'filtered' : ''} result${pagination.totalResults == 1 ? '' : 's'} for "${search.query?.string}"`,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_2.useLang)(lang, {
-        controller: controller,
-    });
-    var recsController;
-    var RecommendationTemplateComponent;
-    var RecommendationTemplateResultComponent;
-    var noresults = Boolean(((_e = (_d = controller.store.search) === null || _d === void 0 ? void 0 : _d.query) === null || _e === void 0 ? void 0 : _e.string) && controller.store.results.length === 0);
-    if (((_f = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _f === void 0 ? void 0 : _f.enabled) && noresults) {
-        var recs = (0, createRecommendationTemplate_1.createRecommendationTemplate)(templates);
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {
+        controller,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    let recsController;
+    let RecommendationTemplateComponent;
+    let RecommendationTemplateResultComponent;
+    const noresults = Boolean(controller.store.search?.query?.string && controller.store.results.length === 0);
+    if (templates?.recommendation?.enabled && noresults) {
+        const recs = (0, createRecommendationTemplate_1.createRecommendationTemplate)(templates);
         RecommendationTemplateComponent = recs.RecommendationTemplateComponent;
         RecommendationTemplateResultComponent = recs.RecommendationTemplateResultComponent;
         recsController = recs.recsController;
     }
-    var findModule = function (module) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    const findModule = (module) => {
         //new row
         if (typeof module !== 'string') {
-            var children_1 = module === null || module === void 0 ? void 0 : module.map(function (subModule) { return findModule(subModule); });
-            var hasContent = module.some(function (subModule, i) { return subModule !== '_' && children_1[i]; });
+            const children = module?.map((subModule) => findModule(subModule));
+            const hasContent = module.some((subModule, i) => subModule !== '_' && children[i]);
             if (!hasContent)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__row", children: children_1 });
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__row", children: children });
         }
-        if (module == 'c1' && ((_a = column1 === null || column1 === void 0 ? void 0 : column1.layout) === null || _a === void 0 ? void 0 : _a.length)) {
-            var children_2 = column1.layout.map(function (m) { return findModule(m); });
-            var hasContent = column1.layout.some(function (m, i) { return (Array.isArray(m) ? Boolean(children_2[i]) : m !== '_' && Boolean(children_2[i])); });
+        if (module == 'c1' && column1?.layout?.length) {
+            const children = column1.layout.map((m) => findModule(m));
+            const hasContent = column1.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c1", children: children_2 });
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c1", children: children });
         }
-        if (module == 'c2' && ((_b = column2 === null || column2 === void 0 ? void 0 : column2.layout) === null || _b === void 0 ? void 0 : _b.length)) {
-            var children_3 = column2.layout.map(function (m) { return findModule(m); });
-            var hasContent = column2.layout.some(function (m, i) { return (Array.isArray(m) ? Boolean(children_3[i]) : m !== '_' && Boolean(children_3[i])); });
+        if (module == 'c2' && column2?.layout?.length) {
+            const children = column2.layout.map((m) => findModule(m));
+            const hasContent = column2.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c2", children: children_3 });
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c2", children: children });
         }
-        if (module == 'c3' && ((_c = column3 === null || column3 === void 0 ? void 0 : column3.layout) === null || _c === void 0 ? void 0 : _c.length)) {
-            var children_4 = column3.layout.map(function (m) { return findModule(m); });
-            var hasContent = column3.layout.some(function (m, i) { return (Array.isArray(m) ? Boolean(children_4[i]) : m !== '_' && Boolean(children_4[i])); });
+        if (module == 'c3' && column3?.layout?.length) {
+            const children = column3.layout.map((m) => findModule(m));
+            const hasContent = column3.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c3", children: children_4 });
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c3", children: children });
         }
-        if (module == 'c4' && ((_d = column4 === null || column4 === void 0 ? void 0 : column4.layout) === null || _d === void 0 ? void 0 : _d.length)) {
-            var children_5 = column4.layout.map(function (m) { return findModule(m); });
-            var hasContent = column4.layout.some(function (m, i) { return (Array.isArray(m) ? Boolean(children_5[i]) : m !== '_' && Boolean(children_5[i])); });
+        if (module == 'c4' && column4?.layout?.length) {
+            const children = column4.layout.map((m) => findModule(m));
+            const hasContent = column4.layout.some((m, i) => (Array.isArray(m) ? Boolean(children[i]) : m !== '_' && Boolean(children[i])));
             if (!hasContent)
                 return null;
-            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c4", children: children_5 });
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c4", children: children });
         }
         if (module == 'termsList') {
-            if (!(terms === null || terms === void 0 ? void 0 : terms.length) && !(history === null || history === void 0 ? void 0 : history.length) && !(trending === null || trending === void 0 ? void 0 : trending.length))
+            if (!terms?.length && !history?.length && !trending?.length)
                 return null;
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms-wrapper'), children: (0, jsx_runtime_1.jsx)(TermsList_1.TermsList, __assign({ controller: controller }, subProps.termsList)) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__autocomplete__terms-wrapper'), children: (0, jsx_runtime_1.jsx)(TermsList_1.TermsList, { controller: controller, ...subProps.termsList }) }));
         }
         if (module == 'terms.history') {
-            if (!(history === null || history === void 0 ? void 0 : history.length))
+            if (!history?.length)
                 return null;
-            return ((0, jsx_runtime_1.jsx)(Terms_1.Terms, __assign({ controller: controller, terms: controller.store.history, className: 'ss__terms-list__terms--history', name: 'history', limit: (_f = (_e = controller.config.settings) === null || _e === void 0 ? void 0 : _e.history) === null || _f === void 0 ? void 0 : _f.limit }, subProps.terms, { title: "History" })));
+            return ((0, jsx_runtime_1.jsx)(Terms_1.Terms, { controller: controller, terms: controller.store.history, className: 'ss__terms-list__terms--history', name: 'history', limit: controller.config.settings?.history?.limit, ...subProps.terms, title: "History" }));
         }
         if (module == 'terms.trending') {
-            if (!(trending === null || trending === void 0 ? void 0 : trending.length))
+            if (!trending?.length)
                 return null;
-            return ((0, jsx_runtime_1.jsx)(Terms_1.Terms, __assign({ controller: controller, terms: controller.store.trending, className: 'ss__terms-list__terms--trending', name: 'trending', limit: (_h = (_g = controller.config.settings) === null || _g === void 0 ? void 0 : _g.trending) === null || _h === void 0 ? void 0 : _h.limit }, subProps.terms, { title: "Trending" })));
+            return ((0, jsx_runtime_1.jsx)(Terms_1.Terms, { controller: controller, terms: controller.store.trending, className: 'ss__terms-list__terms--trending', name: 'trending', limit: controller.config.settings?.trending?.limit, ...subProps.terms, title: "Trending" }));
         }
         if (module == 'terms.suggestions') {
-            if (!(terms === null || terms === void 0 ? void 0 : terms.length))
+            if (!terms?.length)
                 return null;
-            return ((0, jsx_runtime_1.jsx)(Terms_1.Terms, __assign({ controller: controller, terms: controller.store.terms, className: 'ss__terms-list__terms--suggestions', name: 'suggestions' }, subProps.terms, { title: "Suggestions" })));
+            return ((0, jsx_runtime_1.jsx)(Terms_1.Terms, { controller: controller, terms: controller.store.terms, className: 'ss__terms-list__terms--suggestions', name: 'suggestions', ...subProps.terms, title: "Suggestions" }));
         }
         if (module == 'facets') {
-            return facetsToShow.length ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__autocomplete__facets-wrapper'), children: [facetsTitle || lang.facetsTitle.value ? ((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({}, (_j = mergedLang.facetsTitle) === null || _j === void 0 ? void 0 : _j.all)) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(0, jsx_runtime_1.jsx)(Facets_1.Facets, __assign({}, subProps.facets, { facets: facetsToShow })), !excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' })) : null] })] })) : null;
+            return facetsToShow.length ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ss__autocomplete__facets-wrapper'), children: [facetsTitle || lang.facetsTitle.value ? ((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", { ...mergedLang.facetsTitle?.all }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(0, jsx_runtime_1.jsx)(Facets_1.Facets, { ...subProps.facets, facets: facetsToShow }), !excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' }) : null] })] })) : null;
         }
         if (module == 'facetsHorizontal') {
-            return facetsToShow.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [facetsTitle || lang.facetsTitle.value ? ((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({}, (_k = mergedLang.facetsTitle) === null || _k === void 0 ? void 0 : _k.all)) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(0, jsx_runtime_1.jsx)(FacetsHorizontal_1.FacetsHorizontal, __assign({}, subProps.facetsHorizontal, { facets: facetsToShow })), !excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' })) : null] })] })) : null;
+            return facetsToShow.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [facetsTitle || lang.facetsTitle.value ? ((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", { ...mergedLang.facetsTitle?.all }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__facets", children: [(0, jsx_runtime_1.jsx)(FacetsHorizontal_1.FacetsHorizontal, { ...subProps.facetsHorizontal, facets: facetsToShow }), !excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' }) : null] })] })) : null;
         }
         if (module == 'content' && showResults) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: results.length > 0 || loaded ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content-inner", children: [!excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' })) : null, !excludeBanners ? (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.jsxs)("div", { className: "ss__autocomplete__content__results", 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({}, (_l = mergedLang.contentTitle) === null || _l === void 0 ? void 0 : _l.all)) })) : null, (0, jsx_runtime_1.jsx)(Results_1.Results, __assign({ results: results }, subProps.results, { controller: controller }))] })) : loaded ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content__no-results", children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__autocomplete__content__no-results__text" }, (_m = mergedLang.noResultsText) === null || _m === void 0 ? void 0 : _m.all)), RecommendationTemplateComponent && ((_o = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _o === void 0 ? void 0 : _o.loaded) ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__recommendations", children: (0, jsx_runtime_1.jsx)(RecommendationTemplateComponent, { controller: recsController, title: (_s = (_r = (_q = (_p = recsController.store) === null || _p === void 0 ? void 0 : _p.profile) === null || _q === void 0 ? void 0 : _q.display) === null || _r === void 0 ? void 0 : _r.templateParameters) === null || _s === void 0 ? void 0 : _s.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations', treePath: properties.treePath }) })) : null] })) : null, !excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' })) : null] })) : null }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: results.length > 0 || loaded ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content-inner", children: [!excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' }) : null, !excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' }) : null, results.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content__results", 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", { ...mergedLang.contentTitle?.all }) })) : null, (0, jsx_runtime_1.jsx)(Results_1.Results, { results: results, ...subProps.results, controller: controller })] })) : loaded ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content__no-results", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__text", ...mergedLang.noResultsText?.all }), RecommendationTemplateComponent && recsController?.store?.loaded ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__recommendations", children: (0, jsx_runtime_1.jsx)(RecommendationTemplateComponent, { controller: recsController, title: recsController.store?.profile?.display?.templateParameters?.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations', treePath: properties.treePath }) })) : null] })) : null, !excludeBanners ? (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' }) : null] })) : null }));
         }
         if (module == 'no-results' && showResults) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: results.length == 0 && !loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content__no-results", children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__autocomplete__content__no-results__text" }, (_t = mergedLang.noResultsText) === null || _t === void 0 ? void 0 : _t.all)), RecommendationTemplateComponent && ((_u = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _u === void 0 ? void 0 : _u.loaded) ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__recommendations", children: (0, jsx_runtime_1.jsx)(RecommendationTemplateComponent, { controller: recsController, title: (_y = (_x = (_w = (_v = recsController.store) === null || _v === void 0 ? void 0 : _v.profile) === null || _w === void 0 ? void 0 : _w.display) === null || _x === void 0 ? void 0 : _x.templateParameters) === null || _y === void 0 ? void 0 : _y.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations', treePath: properties.treePath }) })) : null] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content", children: results.length == 0 && !loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "ss__autocomplete__content__no-results", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__text", ...mergedLang.noResultsText?.all }), RecommendationTemplateComponent && recsController?.store?.loaded ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__content__no-results__recommendations", children: (0, jsx_runtime_1.jsx)(RecommendationTemplateComponent, { controller: recsController, title: recsController.store?.profile?.display?.templateParameters?.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations', treePath: properties.treePath }) })) : null] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) }));
         }
         if (module == '_') {
             return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__separator" });
         }
         if (module == 'banner.banner') {
-            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' }));
+            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.BANNER, name: 'banner' });
         }
         if (module == 'banner.footer') {
-            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' }));
+            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.FOOTER, name: 'footer' });
         }
         if (module == 'banner.header') {
-            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' }));
+            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.HEADER, name: 'header' });
         }
         if (module == 'banner.left') {
-            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, __assign({}, subProps.banner, { content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' }));
+            return (0, jsx_runtime_1.jsx)(Banner_1.Banner, { ...subProps.banner, content: merchandising.content, type: snap_store_mobx_1.ContentType.LEFT, name: 'left' });
         }
-        if (module == 'button.see-more' && showResults && ((_z = search === null || search === void 0 ? void 0 : search.query) === null || _z === void 0 ? void 0 : _z.string) && results.length > 0) {
-            return ((0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({}, subProps.button, 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))] })));
+        if (module == 'button.see-more' && showResults && search?.query?.string && results.length > 0) {
+            return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { ...subProps.button, ...mergedLang.seeMoreButton.attributes, children: [(0, jsx_runtime_1.jsx)("span", { ...mergedLang.seeMoreButton.value }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon })] }));
         }
     };
     if (typeof props.layout === 'string') {
@@ -515,11 +555,11 @@ exports.AutocompleteLayout = (0, mobx_react_lite_1.observer)(function (propertie
     }
     //fallback for unsupported layout values
     if (typeof layout === 'string') {
-        controller.log.warn("unsupported layout found. ".concat(props.layout));
+        controller.log.warn(`unsupported layout found. ${props.layout}`);
         layout = [];
     }
     /***************************************/
-    return visible && (layout === null || layout === void 0 ? void 0 : layout.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__autocomplete', { 'ss__autocomplete--terms': props.layout === 'terms' }, { 'ss__autocomplete--mobile': props.layout === 'mobile' }, { 'ss__autocomplete--desktop': props.layout === 'desktop' }, { 'ss__autocomplete--tablet': props.layout === 'tablet' }, className, internalClassName), onClick: function (e) { return e.stopPropagation(); }, ref: function (e) { return (0, hooks_2.useA11y)(e, 0, false, onReset); }, children: [(0, jsx_runtime_1.jsx)("span", __assign({ role: 'link', ref: function (e) { return (0, hooks_2.useA11y)(e); }, onClick: function () { return props.onReset && props.onReset(); }, className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' } }, (_g = mergedLang.closeButton) === null || _g === void 0 ? void 0 : _g.all)), layout === null || layout === void 0 ? void 0 : layout.map(function (module) {
+    return visible && layout?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__autocomplete', { 'ss__autocomplete--terms': props.layout === 'terms' }, { 'ss__autocomplete--mobile': props.layout === 'mobile' }, { 'ss__autocomplete--desktop': props.layout === 'desktop' }, { 'ss__autocomplete--tablet': props.layout === 'tablet' }, className, internalClassName), onClick: (e) => e.stopPropagation(), ref: (e) => (0, hooks_2.useA11y)(e, 0, false, onReset), children: [(0, jsx_runtime_1.jsx)("span", { role: 'link', ref: (e) => (0, hooks_2.useA11y)(e), onClick: () => props.onReset && props.onReset(), className: "ss__autocomplete__close-button", style: { position: 'absolute', top: '-10000000px', left: '-1000000px' }, ...mergedLang.closeButton?.all }), layout?.map((module) => {
                     return findModule(module);
-                })] })) })) : null;
+                })] }) })) : null;
 });