@athoscommerce/snap-preact 1.0.0

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

@@ -0,0 +1,515 @@
+"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;
+    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)({
+        '.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,
+        },
+        '.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,
+        },
+        '.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,
+        },
+        '.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,
+        },
+        '.ss__autocomplete__column, .ss__autocomplete__row': {
+            minWidth: 0,
+        },
+        '&, & *, & *:before, & *:after': {
+            boxSizing: 'border-box',
+        },
+        flexWrap: 'wrap',
+        display: 'flex',
+        flexDirection: 'row',
+        position: 'absolute',
+        zIndex: '10002',
+        border: '1px solid #ebebeb',
+        background: '#ffffff',
+        maxWidth: width,
+        maxHeight: viewportMaxHeight && inputViewportOffsetBottom ? "calc(100vh - ".concat(inputViewportOffsetBottom + 10, "px)") : undefined,
+        overflowY: 'scroll',
+        '.ss__autocomplete__row': {
+            display: 'flex',
+            flexDirection: 'row',
+            flexBasis: '100%',
+        },
+        '.ss__autocomplete__column': {
+            display: 'flex',
+            flexDirection: 'column',
+            flexFlow: 'wrap',
+        },
+        '.ss__autocomplete__column:empty, .ss__autocomplete__row:empty': {
+            display: 'none',
+        },
+        '.ss__autocomplete__separator': {
+            flexGrow: 1,
+            flexShrink: 1,
+        },
+        '.ss__autocomplete__close-button': {
+            color: '#c5c5c5',
+            fontSize: '.8em',
+        },
+        '.ss__autocomplete__close-button:focus': {
+            top: '0px !important',
+            left: '0px !important',
+            zIndex: '1',
+        },
+        '.ss__autocomplete__terms-wrapper': {
+            background: '#f8f8f8',
+            width: '100%',
+        },
+        '.ss__autocomplete__facets': {
+            display: 'flex',
+            width: 'auto',
+            flexDirection: 'column',
+            columnGap: '20px',
+            padding: '10px',
+            overflowY: 'auto',
+            '.ss__facets': {
+                display: 'flex',
+                flexDirection: '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__facets-wrapper': {
+            width: '100%',
+        },
+        '.ss__autocomplete__content': {
+            display: 'flex',
+            flex: "1 1 0%",
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            overflowY: 'auto',
+            margin: noResults ? '0 auto' : undefined,
+            '.ss__autocomplete__content-inner': {
+                padding: '10px',
+            },
+            '.ss__autocomplete__content__results, .ss__autocomplete__content__no-results': {
+                minHeight: '0%',
+            },
+        },
+        '.ss__banner.ss__banner--header, .ss__banner.ss__banner--banner': {
+            marginBottom: '10px',
+        },
+        '.ss__banner.ss__banner--footer': {
+            margin: '10px 0',
+        },
+        '.ss__autocomplete__button--see-more': {
+            padding: '10px',
+            height: 'min-content',
+            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,
+                '.ss__icon': {
+                    marginLeft: '5px',
+                },
+            },
+        },
+    });
+};
+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 = {
+        facetsTitle: '',
+        contentTitle: '',
+        layout: [['c1', 'c2', 'c3']],
+        column1: {
+            layout: ['termsList'],
+            width: '150px',
+        },
+        column2: {
+            layout: ['facets'],
+            width: '150px',
+        },
+        column3: {
+            layout: [['content'], ['_', 'button.see-more']],
+            width: 'auto',
+            alignContent: 'space-between',
+        },
+        width: '100%',
+        templates: {
+            recommendation: {
+                enabled: true,
+            },
+        },
+    };
+    var props = (0, utilities_1.mergeProps)('autocompleteLayout', globalTheme, defaultProps, properties);
+    delete props.treePath;
+    if (props.layout == 'terms') {
+        props.templates = {
+            recommendation: {
+                enabled: false,
+            },
+        };
+    }
+    var valueProps = (0, toolbox_1.createHoverProps)();
+    var facetClickEvent = function () {
+        // 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,
+            },
+            facetGridOptions: {
+                onClick: facetClickEvent,
+            },
+            facetHierarchyOptions: {
+                onClick: facetClickEvent,
+            },
+            facetListOptions: {
+                onClick: facetClickEvent,
+            },
+            facetPaletteOptions: {
+                onClick: facetClickEvent,
+            },
+        },
+    };
+    if (!(globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.name)) {
+        var themeDefaults = {
+            components: {
+                facet: {
+                    limit: 6,
+                    disableOverflow: true,
+                    disableCollapse: true,
+                    searchable: false,
+                    showClearAllText: false,
+                    showSelectedCount: false,
+                },
+                facetGridOptions: {
+                    columns: 3,
+                },
+                facetHierarchyOptions: {
+                    hideCount: true,
+                },
+                facetListOptions: {
+                    hideCheckbox: true,
+                    hideCount: true,
+                },
+                facetPaletteOptions: {
+                    hideLabel: true,
+                    columns: 3,
+                },
+                result: {
+                    hideBadge: true,
+                    hideVariantSelections: true,
+                },
+            },
+        };
+        // 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; },
+        });
+        props = __assign(__assign({}, props), { 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 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', 
+            // default props
+            onClick: function () {
+                (controller === null || controller === void 0 ? void 0 : 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 == 'mini' ? 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 == 'mini' ? false : true, 
+            // default props
+            controller: controller }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { theme: props.theme, treePath: properties.treePath }),
+        facets: __assign(__assign({ 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({ 
+            // default props
+            internalClassName: 'ss__autocomplete__banner' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: properties.treePath }),
+        results: __assign(__assign({ columns: 3, rows: 2, 
+            // default props
+            internalClassName: 'ss__autocomplete__results', resultComponent: resultComponent }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme, treePath: properties.treePath }),
+        icon: __assign(__assign({ 
+            // default props
+            internalClassName: 'ss__autocomplete__icon', icon: 'angle-right', size: '10px' }, (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            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 || [];
+    // 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 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();
+        if (trendingActive || historyActive || showResultsBool()) {
+            setShowResults(true);
+        }
+        else {
+            setShowResults(false);
+        }
+    };
+    (0, hooks_1.useEffect)(function () {
+        checkAndSetShowResults();
+    }, [trending, history]);
+    var facetsToShow = facets.length ? facets.filter(function (facet) { return facet.display !== types_1.FacetDisplay.SLIDER; }) : [];
+    // results logic
+    checkAndSetShowResults();
+    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    var reset = function () {
+        controller.setFocused();
+        onReset && onReset();
+    };
+    //initialize lang
+    var defaultLang = {
+        contentTitle: {
+            value: contentTitle,
+        },
+        closeButton: {
+            value: 'Close Autocomplete',
+            attributes: {
+                'aria-label': 'close autocomplete',
+            },
+        },
+        facetsTitle: {
+            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>"),
+        },
+        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, "\""),
+        },
+    };
+    //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, properties.theme);
+        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;
+        //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]; });
+            if (!hasContent)
+                return null;
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__row", children: children_1 });
+        }
+        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 (!hasContent)
+                return null;
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c1", children: children_2 });
+        }
+        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 (!hasContent)
+                return null;
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c2", children: children_3 });
+        }
+        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 (!hasContent)
+                return null;
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c3", children: children_4 });
+        }
+        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 (!hasContent)
+                return null;
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__autocomplete__column ss__autocomplete__column--c4", children: children_5 });
+        }
+        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))
+                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)) }));
+        }
+        if (module == 'terms.history') {
+            if (!(history === null || history === void 0 ? void 0 : 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" })));
+        }
+        if (module == 'terms.trending') {
+            if (!(trending === null || trending === void 0 ? void 0 : 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" })));
+        }
+        if (module == 'terms.suggestions') {
+            if (!(terms === null || terms === void 0 ? void 0 : 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" })));
+        }
+        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;
+        }
+        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;
+        }
+        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 }));
+        }
+        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, {})) }));
+        }
+        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' }));
+        }
+        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' }));
+        }
+        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' }));
+        }
+        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' }));
+        }
+        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 (typeof props.layout === 'string') {
+        if (props.layout === 'terms') {
+            layout = [['termsList'], ['no-results'], ['_', 'button.see-more']];
+        }
+        if (props.layout === 'mini') {
+            layout = [['termsList'], ['content'], ['_', 'button.see-more']];
+        }
+        if (props.layout === 'standard') {
+            layout = [['c1', 'c2', 'c3']];
+        }
+    }
+    /***************************************/
+    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--mini': props.layout === 'mini' }, className, internalClassName), onClick: function (e) { return e.stopPropagation(); }, ref: function (e) { return (0, hooks_2.useA11y)(e, 0, false, 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' } }, (_g = mergedLang.closeButton) === null || _g === void 0 ? void 0 : _g.all)), layout === null || layout === void 0 ? void 0 : layout.map(function (module) {
+                    return findModule(module);
+                })] })) })) : null;
+});

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+import { ComponentProps } from '../../../types';
+export type BranchOverrideTheme = {
+    class: string;
+    main: {
+        border: string;
+        background: string;
+        color: string;
+        boxShadow: string;
+    };
+    top: {
+        background?: string;
+        border: string;
+        logo: {
+            src: string;
+        };
+        button: {
+            border: string;
+            color: string;
+            content: string;
+        };
+        close: {
+            fill: string;
+        };
+    };
+    bottom: {
+        content: string;
+        branch: {
+            color: string;
+            style: string;
+        };
+        additional: {
+            color: string;
+        };
+    };
+};
+export declare const BranchOverride: (properties: BranchOverrideProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export interface BranchOverrideProps extends ComponentProps {
+    branch: string;
+    error?: {
+        message: string;
+        description: string;
+    };
+    details?: {
+        url: string;
+        lastModified: string;
+    };
+    onRemoveClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, branch: string) => void;
+    darkMode?: boolean;
+}
+//# sourceMappingURL=BranchOverride.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BranchOverride.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/BranchOverride/BranchOverride.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,MAAM,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,GAAG,EAAE;QACJ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,MAAM,EAAE;YACP,MAAM,EAAE,MAAM,CAAC;YACf,KAAK,EAAE,MAAM,CAAC;YACd,OAAO,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,KAAK,EAAE;YACN,IAAI,EAAE,MAAM,CAAC;SACb,CAAC;KACF,CAAC;IACF,MAAM,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;QACF,UAAU,EAAE;YACX,KAAK,EAAE,MAAM,CAAC;SACd,CAAC;KACF,CAAC;CACF,CAAC;AAuMF,eAAO,MAAM,cAAc,eAAgB,mBAAmB,4DA0G7D,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB"}