@fluid-topics/ft-search-bar 0.2.21 → 0.3.1

package/build/ft-search-bar.js

@@ -7,13 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { classMap } from "lit/directives/class-map.js";
 import { Debouncer, FtLitElement, jsonProperty, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
 import { FtSizeCategory, FtSizeWatcher } from "@fluid-topics/ft-size-watcher";
 import { FtTypography, FtTypographyBody2 } from "@fluid-topics/ft-typography";
-import { facetToFilter, getBreadcrumbFromValue, getLabelFromValue, getSelectedValues, selectedValues, serializeRequest, unquote } from "./converters";
+import { facetToFilter, selectedValues, serializeRequest, unquote } from "./converters";
 import { FtFilter, FtFilterOption } from "@fluid-topics/ft-filter";
-import { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon, } from "@fluid-topics/ft-icon";
+import { FtIcon, } from "@fluid-topics/ft-icon";
 import { FtAccordion, FtAccordionItem } from "@fluid-topics/ft-accordion";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtChip } from "@fluid-topics/ft-chip";
@@ -22,8 +21,12 @@ import { FtSnapScroll } from "@fluid-topics/ft-snap-scroll";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { flatDeep } from "@fluid-topics/ft-filter/build/utils";
-import { facetsCss, searchBarCss, selectedFiltersCss, suggestionsCss } from "./ft-search-bar.css";
+import { facetsCss, searchBarCss } from "./ft-search-bar.css";
 import { FtSkeleton } from "@fluid-topics/ft-skeleton";
+import { SuggestManager } from "./managers/SuggestManager";
+import { FacetsChipsManager } from "./managers/FacetsChipsManager";
+import { MobileSearchBarManager } from "./managers/MobileSearchBarManager";
+import { DesktopSearchBarManager } from "./managers/DesktopSearchBarManager";
 if (window.fluidtopics == null) {
     console.warn("Fluid Topics public API was not found. You can find it here: https://www.npmjs.com/package/@fluid-topics/public-api");
 }
@@ -42,7 +45,6 @@ export const DEFAULT_LABELS = {
     removeRecentSearch: "Remove",
     back: "Back",
 };
-export { FtSearchBarCssVariables } from "./ft-search-bar.css";
 export class LaunchSearchEvent extends CustomEvent {
     constructor(request) {
         super("launch-search", {
@@ -85,13 +87,15 @@ export class FtSearchBar extends FtLitElement {
         this.knownFacetLabels = new Map();
         this.query = "";
         this.suggestions = [];
-        this.suggestionsLoaded = true;
         this.recentSearches = [];
         this.updateFacetsDebouncer = new Debouncer(500);
-        this.suggestDebouncer = new Debouncer(300);
+        this.suggestManager = new SuggestManager(this);
+        this.selectedFacetsManager = new FacetsChipsManager(this);
+        this.desktopSearchBarManager = new DesktopSearchBarManager(this);
+        this.mobileSearchBarManager = new MobileSearchBarManager(this);
         this.facetsLoaded = false;
         this.closeFloatingContainer = (e) => {
-            if (!this.isMobile) {
+            if (!this.isMobile()) {
                 this.displayFacets = this.displayFacets && e.composedPath().some(element => element === this.floatingContainer);
             }
         };
@@ -103,8 +107,8 @@ export class FtSearchBar extends FtLitElement {
             && a.filters.length === b.filters.length
             && a.filters.every(fa => b.filters.some(fb => this.compareFilters(fa, fb)));
     }
-    get isMobileMenuOpen() {
-        return this.isMobile && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
+    isMobileMenuOpen() {
+        return this.isMobile() && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
     }
     get request() {
         return {
@@ -131,7 +135,7 @@ export class FtSearchBar extends FtLitElement {
             sort: []
         };
     }
-    get isMobile() {
+    isMobile() {
         switch (this.mode) {
             case "mobile":
                 return true;
@@ -141,7 +145,7 @@ export class FtSearchBar extends FtLitElement {
                 return this.sizeCategory === FtSizeCategory.S;
         }
     }
-    get hasFacets() {
+    hasFacets() {
         return this.facetsRequest.length > 0;
     }
     get hasPresets() {
@@ -150,7 +154,7 @@ export class FtSearchBar extends FtLitElement {
     get hasPriors() {
         return this.priors != null && this.priors.length > 0;
     }
-    get hasLocaleSelector() {
+    hasLocaleSelector() {
         return this.availableContentLocales.length > 1;
     }
     focus() {
@@ -181,95 +185,20 @@ export class FtSearchBar extends FtLitElement {
         `;
     }
     renderSearchBar() {
-        const rootClasses = {
-            "ft-search-bar--container": true,
-            "ft-search-bar--dense": !this.isMobile && this.dense,
-            "ft-search-bar--mobile": this.isMobile,
-            "ft-search-bar--desktop": !this.isMobile,
-            "ft-search-bar--floating-panel-open": !this.isMobile && this.displayFacets && !this.forceMenuOpen,
-            "ft-search-bar--mobile-menu-open": this.isMobileMenuOpen,
-            "ft-search-bar--forced-open": this.forceMenuOpen || this.forceMobileMenuOpen,
-        };
-        return this.facetsInitialized && this.availableContentLocalesInitialized ? html `
-            <div class="${classMap(rootClasses)}" part="container" tabindex="-1">
-                ${this.isMobile ? this.renderMobileSearchBar() : this.renderDesktopSearchBar()}
-            </div>
-        ` : html `
-            <ft-skeleton class="ft-search-bar--container ft-search-bar--skeleton" part="loader"
-                         tabindex="-1"></ft-skeleton>
-        `;
-    }
-    renderMobileSearchBar() {
-        return html `
-            <div class="ft-search-bar">
-                <div class="ft-search-bar--input-container" part="input-container">
-                    <div class="ft-search-bar--input-outline" part="input-outline">
-                        <input class="ft-search-bar--input ft-typography--body2"
-                               part="input"
-                               type="text"
-                               placeholder="${this.labelResolver.resolve("inputPlaceHolder")}"
-                               value="${this.query}"
-                               @keyup=${this.onSearchBarKeyUp}
-                               @focus=${() => {
-            this.mobileMenuOpen = true;
-            this.displayFacets = false;
-        }}>
-                    </div>
-                </div>
-                ${this.renderMobileSearchBarButtons()}
-            </div>
-            ${this.displayFacets ? this.renderFacetsActions() : this.renderSelectedFacets()}
-            ${this.displayFacets ? this.renderMobileFacets() : this.renderSuggestions()}
-            ${this.isMobileMenuOpen || this.displayFacets ? html `
-                        <ft-button class="ft-search-bar--launch-search"
-                                   part="launch-search-in-panel"
-                                   icon="search"
-                                   @click=${this.launchSearch}>
-                            ${this.labelResolver.resolve("searchButton")}
-                        </ft-button>
-                    ` : nothing}
-        `;
-    }
-    renderMobileSearchBarButtons() {
-        const displayClearButton = this.query || (this.isMobileMenuOpen && !this.forceMobileMenuOpen);
-        return html `
-            ${displayClearButton ? html `
-                <div class="ft-search-bar--actions"
-                     part="search-bar-actions">
-                    <ft-button class="ft-search-bar--clear-query"
-                               part="clear-query"
-                               icon="close"
-                               round
-                               label="${this.labelResolver.resolve("clearInputButton")}"
-                               tooltipPosition="left"
-                               @click=${() => {
-            this.setQuery("");
-            this.mobileMenuOpen = false;
-            this.displayFacets = false;
-        }}
-                    ></ft-button>
-                </div>
-            ` : nothing}
-            <div class="ft-search-bar--actions"
-                 part="search-bar-actions">
-                <ft-button class="ft-search-bar--launch-search"
-                           part="launch-search-in-bar"
-                           icon="search"
-                           round
-                           label="${this.labelResolver.resolve("searchButton")}"
-                           tooltipPosition="left"
-                           @click=${() => { var _a; return this.isMobileMenuOpen ? this.launchSearch() : (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }}
-                ></ft-button>
-            </div>
-        `;
+        return this.facetsInitialized && this.availableContentLocalesInitialized
+            ? this.isMobile() ? this.mobileSearchBarManager.render() : this.desktopSearchBarManager.render()
+            : html `
+                    <ft-skeleton class="ft-search-bar--container ft-search-bar--skeleton" part="loader"
+                                 tabindex="-1"></ft-skeleton>
+                `;
     }
     renderMobileFacets() {
         var _a;
         const currentLocale = this.availableContentLocales.filter(l => l.lang === this.contentLocale).pop();
         return html `
             <ft-accordion class="ft-search-bar--filters-container">
-                ${this.hasLocaleSelector ? html `
-                    <ft-accordion-item data-facet-key="ft:contentLocale">
+                ${this.hasLocaleSelector() ? html `
+                    <ft-accordion-item data-facet-key="ft:locale">
                         <div class="ft-search-bar--filter-label" slot="toggle">
                             <ft-typography variant="button">${this.labelResolver.resolve("contentLocaleSelector")}
                             </ft-typography>
@@ -326,36 +255,8 @@ export class FtSearchBar extends FtLitElement {
             selected: l.lang == this.contentLocale
         }));
     }
-    renderDesktopSearchBar() {
-        return html `
-            <div class="ft-search-bar" part="search-bar">
-                ${(this.renderSearchBarLeftAction())}
-                <div class="ft-search-bar--input-container" part="input-container" tabindex="-1">
-                    <div class="ft-search-bar--input-outline" part="input-outline">
-                        ${this.dense ? this.renderSelectedFacets() : nothing}
-                        <input class="ft-search-bar--input ft-typography--body2"
-                               part="input"
-                               type="text"
-                               placeholder="${this.labelResolver.resolve("inputPlaceHolder")}"
-                               value="${this.query}"
-                               @keydown=${this.onSearchBarKeyDown}
-                               @keyup=${this.onSearchBarKeyUp}>
-                    </div>
-                    ${this.renderSuggestions()}
-                </div>
-                ${this.renderDesktopSearchBarButtons()}
-                ${this.forceMenuOpen ? nothing : html `
-                            <div class="ft-search-bar--floating-panel" @keyup=${this.onFloatingContainerKeyUp}
-                                 part="floating-panel"
-                                 tabindex="-1">
-                                ${this.renderDesktopMenu()}
-                            </div>`}
-            </div>
-            ${this.dense || this.forceMenuOpen ? (this.forceMenuOpen ? this.renderDesktopMenu() : nothing) : this.renderSelectedFacets()}
-        `;
-    }
     renderDesktopMenu() {
-        return this.hasFacets ? html `
+        return this.hasFacets() ? html `
             <div class="ft-search-bar--desktop-menu">
                 ${this.renderFacetsActions()}
                 ${this.renderDesktopFacets()}
@@ -371,64 +272,6 @@ export class FtSearchBar extends FtLitElement {
             </div>
         ` : nothing;
     }
-    renderSearchBarLeftAction() {
-        if (this.hasFacets) {
-            return this.forceMenuOpen ? nothing : html `
-                <ft-button class="ft-search-bar--filters-opener ft-search-bar--left-action"
-                           part="filters-opener"
-                           trailingIcon
-                           icon="${this.displayFacets ? "expand_less" : "expand_more"}"
-                           @click=${(e) => {
-                e.stopPropagation();
-                this.displayFacets = !this.displayFacets;
-            }}
-                           @focusin=${(e) => e.stopPropagation()}>
-                    ${this.labelResolver.resolve("filtersButton")}
-                </ft-button>
-            `;
-        }
-        else if (this.hasLocaleSelector) {
-            return html `
-                <ft-select outlined
-                           class="ft-search-bar--content-locale ft-search-bar--left-action"
-                           part="content-locale select-ft-locale"
-                           .exportpartsPrefixes=${["content-locale", "select-ft-locale"]}
-                           @change=${(e) => this.contentLocale = e.detail == null ? undefined : e.detail}>
-                    ${repeat(this.availableContentLocales, l => l.lang, l => html `
-                                <ft-select-option .value=${l.lang}
-                                                  label="${l.label}"
-                                                  ?selected=${l.lang === this.contentLocale}>
-                                </ft-select-option>
-                            `)}
-                </ft-select>
-            `;
-        }
-        return nothing;
-    }
-    renderDesktopSearchBarButtons() {
-        return html `
-            <div class="ft-search-bar--actions"
-                 part="search-bar-actions">
-                ${this.query ? html `
-                    <ft-button class="ft-search-bar--clear-query"
-                               part="clear-query"
-                               icon="close"
-                               round dense
-                               label="${this.labelResolver.resolve("clearInputButton")}"
-                               @click=${() => this.setQuery("")}
-                    ></ft-button>
-                    <div class="ft-search-bar--separator"></div>
-                ` : null}
-                <ft-button class="ft-search-bar--launch-search"
-                           part="launch-search-in-bar"
-                           icon="search"
-                           round dense
-                           label="${this.labelResolver.resolve("searchButton")}"
-                           @click=${this.launchSearch}
-                ></ft-button>
-            </div>
-        `;
-    }
     renderFacetsActions() {
         var _a;
         return html `
@@ -449,7 +292,7 @@ export class FtSearchBar extends FtLitElement {
                     </ft-select>
                 ` : nothing}
                 <slot name="facets-actions"></slot>
-                ${this.forceMenuOpen && !this.isMobile ? nothing : this.renderDesktopClearFilters()}
+                ${this.forceMenuOpen && !this.isMobile() ? nothing : this.renderDesktopClearFilters()}
             </div>
         `;
     }
@@ -462,7 +305,7 @@ export class FtSearchBar extends FtLitElement {
         ` : nothing;
     }
     renderDesktopFacets() {
-        if (!this.hasFacets) {
+        if (!this.hasFacets()) {
             return nothing;
         }
         return html `
@@ -470,7 +313,7 @@ export class FtSearchBar extends FtLitElement {
                             class="ft-search-bar--filters-container"
                             part="filters-container"
                             exportpartsPrefix="filters-container">
-                ${this.hasLocaleSelector ? html `
+                ${this.hasLocaleSelector() ? html `
                     <ft-filter
                             id="ft:locale"
                             class="ft-search-bar--content-locale"
@@ -508,143 +351,6 @@ export class FtSearchBar extends FtLitElement {
             </ft-snap-scroll>
         `;
     }
-    renderSelectedFacets() {
-        if (!this.hasLocaleSelector && !this.hasFacets) {
-            return null;
-        }
-        const useSnapScroll = (!this.isMobile && this.dense) || (this.isMobile && this.isMobileMenuOpen);
-        const filters = html `
-            ${this.hasLocaleSelector && (this.hasFacets || this.isMobile) ? html `
-                <ft-chip part="selected-filters selected-filter-ft-locale"
-                         ?dense=${this.dense && !this.isMobile}
-                         ?clickable=${this.isMobile}
-                         @click=${() => this.openMobileFilters("ft:contentLocale")}
-                         data-key="ft:locale"
-                         data-value="${this.contentLocale}">
-                    ${(this.getLocaleLabel(this.contentLocale))}
-                </ft-chip>
-            ` : null}
-            ${repeat(this.facets, facet => facet.key, facet => {
-            const values = getSelectedValues(facet);
-            return repeat(values, value => {
-                let label = facet.label + ": " + getBreadcrumbFromValue(value);
-                const keyWithNoColumn = facet.key.replace(":", "-");
-                const chip = html `
-                                        <ft-chip
-                                                part="selected-filters selected-filter-${keyWithNoColumn}"
-                                                ?dense=${this.dense && !this.isMobile}
-                                                ?clickable=${this.isMobile}
-                                                ?removable=${!this.isMobile}
-                                                icon=${this.isMobile ? nothing : "close"}
-                                                label="${label}"
-                                                title=${useSnapScroll ? label : nothing}
-                                                @click=${() => this.openMobileFilters(facet.key)}
-                                                @icon-click=${() => this.setFilter(facet.key, values.filter(v => v !== value))}
-                                                data-key="${facet.key}"
-                                                data-value="${value}">
-                                            ${getLabelFromValue(value)}
-                                        </ft-chip>
-                                    `;
-                return useSnapScroll ? chip : html `
-                                        <ft-tooltip inline text="${label}">
-                                            ${chip}
-                                        </ft-tooltip>
-                                    `;
-            });
-        })}
-            ${this.isMobile ? html `
-                <ft-chip part="selected-filters mobile-filters-opener"
-                         icon="add"
-                         clickable
-                         @click=${() => {
-            this.mobileMenuOpen = true;
-            this.displayFacets = true;
-        }}>
-                    ${this.labelResolver.resolve("filtersButton")}
-                </ft-chip>
-            ` : nothing}
-        `;
-        return useSnapScroll
-            ? html `
-                    <ft-snap-scroll horizontal controls hideScrollbar limitSize
-                                    class="ft-search-bar--selected-filters"
-                                    part="selected-filters-container"
-                                    exportpartsPrefix="selected-filters-container">
-                        ${filters}
-                    </ft-snap-scroll>
-                `
-            : html `
-                    <div class="ft-search-bar--selected-filters" part="selected-filters-container">
-                        ${filters}
-                    </div>
-                `;
-    }
-    renderSuggestions() {
-        const filteredRecentSearches = this.recentSearches.filter(q => q.toLowerCase().includes(this.query.toLowerCase()));
-        const shouldDisplaySuggestions = this.suggestions.length > 0 || filteredRecentSearches.length > 0;
-        return html `
-            <div class="ft-search-bar--suggestions ${shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
-                 part="suggestions-container"
-                 @keydown=${this.onSuggestKeyDown}>
-                ${repeat(filteredRecentSearches.slice(0, 5), query => query, query => html `
-                            <a href="${this.searchRequestSerializer({ ...this.request, query: query })}"
-                               part="suggestions"
-                               class="ft-search-bar--suggestion ft-search-bar--recent-search"
-                               @keyup=${(e) => this.onSuggestKeyUp(e, query)}
-                               @click=${(e) => this.onSuggestClick(e, query)}>
-                                <ft-ripple></ft-ripple>
-                                <ft-icon variant="material" part="suggestion-icon">history</ft-icon>
-                                <ft-typography variant="body1">${query}</ft-typography>
-                                <ft-button icon="close"
-                                           round
-                                           part="remove-suggestion"
-                                           ?dense=${!this.isMobile}
-                                           label="${this.labelResolver.resolve("removeRecentSearch")}"
-                                           tooltipPosition="left"
-                                           @click=${(e) => this.removeRecentSearch(e, query)}></ft-button>
-                            </a>
-                        `)}
-                ${repeat(this.suggestions, suggest => suggest.value, suggest => html `
-                            <a href="${this.searchRequestSerializer({ ...this.request, query: suggest.value })}"
-                               part="suggestions"
-                               class="ft-search-bar--suggestion"
-                               @keyup=${(e) => this.onSuggestKeyUp(e, suggest.value)}
-                               @click=${(e) => this.onSuggestClick(e, suggest.value)}>
-                                <ft-ripple></ft-ripple>
-                                ${this.getIcon(suggest)}
-                                <ft-typography variant="body1">${suggest.value}</ft-typography>
-                            </a>
-                        `)}
-            </div>
-        `;
-    }
-    getIcon(suggest) {
-        const iconVariant = suggest.type === "DOCUMENT" ? FtIconVariants.file_format : FtIconVariants.fluid_topics;
-        let icon;
-        switch (suggest.type) {
-            case "MAP":
-                icon = suggest.editorialType === "BOOK" ? FtIcons.BOOK : FtIcons.ARTICLE;
-                break;
-            case "DOCUMENT":
-                icon = resolveFileFormatIcon(suggest.mimeType, suggest.filenameExtension);
-                break;
-            case "TOPIC":
-                icon = FtIcons.TOPICS;
-                break;
-        }
-        return html `
-            <ft-icon variant="${iconVariant}" part="suggestion-icon">
-                ${icon}
-            </ft-icon>
-        `;
-    }
-    openMobileFilters(filterKey) {
-        if (this.isMobile) {
-            this.mobileMenuOpen = true;
-            this.displayFacets = true;
-            this.scrollToFacet = filterKey;
-        }
-    }
     async firstUpdated(props) {
         super.firstUpdated(props);
         this.initApi();
@@ -661,7 +367,7 @@ export class FtSearchBar extends FtLitElement {
         }
         if (props.has("sizeCategory")) {
             this.mobileMenuOpen = false;
-            this.displayFacets = this.displayFacets && !this.isMobile;
+            this.displayFacets = this.displayFacets && !this.isMobile();
         }
         super.update(props);
         if ((props.has("availableContentLocales") || props.has("contentLocale")) && this.availableContentLocales.length > 0) {
@@ -704,7 +410,7 @@ export class FtSearchBar extends FtLitElement {
             this.updateFacets();
         }
         if (["query", "uiLocale", "contentLocale", "searchFilters", "displayedFilters", "api"].some(p => props.has(p))) {
-            this.updateSuggestions();
+            this.suggestManager.update();
         }
         if (["query", "uiLocale", "contentLocale", "searchFilters"].some(p => props.has(p))) {
             this.dispatchEvent(new SearchStateChangeEvent(this.request));
@@ -773,34 +479,6 @@ export class FtSearchBar extends FtLitElement {
             }
         }
     }
-    updateSuggestions() {
-        this.suggestionsLoaded = false;
-        this.suggestDebouncer.run(async () => {
-            this.suggestions = this.api && this.query.length > 2 ? await this.api.getSuggestions(this.suggestRequest).then(r => r.suggestions).catch(() => []) : [];
-            this.suggestionsLoaded = true;
-        });
-    }
-    onSearchBarKeyUp(e) {
-        const input = e.composedPath()[0];
-        this.query = input.value;
-        if (e.key === "Enter") {
-            this.launchSearch();
-        }
-    }
-    onSearchBarKeyDown(e) {
-        var _a, _b;
-        switch (e.key) {
-            case "Escape":
-                this.mobileMenuOpen = false;
-                (_a = this.input) === null || _a === void 0 ? void 0 : _a.blur();
-                break;
-            case "ArrowDown":
-                e.stopPropagation();
-                e.preventDefault();
-                (_b = this.firstSuggestion) === null || _b === void 0 ? void 0 : _b.focus();
-                break;
-        }
-    }
     onFloatingContainerKeyUp(e) {
         var _a;
         if (e.key === "Escape") {
@@ -814,21 +492,6 @@ export class FtSearchBar extends FtLitElement {
         }
         this.query = query;
     }
-    onSuggestClick(e, suggest) {
-        if (!e.ctrlKey && !e.metaKey) {
-            this.onSuggestSelected(e, suggest);
-        }
-    }
-    onSuggestKeyUp(e, suggest) {
-        if (e.key === "Enter" || e.key === " ") {
-            this.onSuggestSelected(e, suggest);
-        }
-    }
-    onSuggestSelected(e, suggest) {
-        e.preventDefault();
-        this.setQuery(suggest);
-        this.launchSearch();
-    }
     launchSearch() {
         if (this.query) {
             let filteredRecentSearches = this.recentSearches
@@ -872,12 +535,6 @@ export class FtSearchBar extends FtLitElement {
     updateSize(e) {
         this.sizeCategory = e.detail.category;
     }
-    getLocaleLabel(locale) {
-        var _a;
-        return (_a = this.availableContentLocales.filter(l => { var _a; return ((_a = l.lang) !== null && _a !== void 0 ? _a : "").toLowerCase() === (locale !== null && locale !== void 0 ? locale : "").toLowerCase(); })
-            .map(l => l.label)
-            .pop()) !== null && _a !== void 0 ? _a : locale;
-    }
     setFilter(key, selectedValues) {
         let newFilters = this.searchFilters.filter(f => f.key !== key);
         this.facets.forEach(facet => {
@@ -909,29 +566,20 @@ export class FtSearchBar extends FtLitElement {
         const firstFacet = this.facets[0];
         this.scrollToFacet = firstFacet === null || firstFacet === void 0 ? void 0 : firstFacet.key;
     }
-    removeRecentSearch(e, query) {
-        var _a, _b, _c, _d;
-        e.preventDefault();
-        e.stopPropagation();
-        const thingToFocus = (_d = (_b = (_a = this.focusedSuggestion) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : (_c = this.focusedSuggestion) === null || _c === void 0 ? void 0 : _c.nextElementSibling) !== null && _d !== void 0 ? _d : this.input;
-        thingToFocus === null || thingToFocus === void 0 ? void 0 : thingToFocus.focus();
-        this.recentSearches = this.recentSearches.filter(q => q.toLowerCase() !== query.toLowerCase());
-        this.saveRecentSearches();
+    querySelector(selectors) {
+        return this.shadowRoot.querySelector(selectors);
     }
-    onSuggestKeyDown(e) {
-        var _a, _b, _c, _d, _e, _f;
-        switch (e.key) {
-            case "ArrowUp":
-                (_c = ((_b = (_a = this.focusedSuggestion) === null || _a === void 0 ? void 0 : _a.previousElementSibling) !== null && _b !== void 0 ? _b : this.lastSuggestion)) === null || _c === void 0 ? void 0 : _c.focus();
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-            case "ArrowDown":
-                (_f = ((_e = (_d = this.focusedSuggestion) === null || _d === void 0 ? void 0 : _d.nextElementSibling) !== null && _e !== void 0 ? _e : this.firstSuggestion)) === null || _f === void 0 ? void 0 : _f.focus();
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-        }
+    querySelectorAll(selectors) {
+        return this.shadowRoot.querySelectorAll(selectors);
+    }
+    renderDesktopFloatingMenu() {
+        return this.forceMenuOpen ? nothing : html `
+            <div class="ft-search-bar--floating-panel"
+                 @keyup=${this.onFloatingContainerKeyUp}
+                 part="floating-panel"
+                 tabindex="-1">
+                ${this.renderDesktopMenu()}
+            </div>`;
     }
 }
 FtSearchBar.elementDefinitions = {
@@ -955,8 +603,8 @@ FtSearchBar.styles = [
     FtTypographyBody2,
     searchBarCss,
     facetsCss,
-    selectedFiltersCss,
-    suggestionsCss
+    FacetsChipsManager.styles,
+    SuggestManager.styles
 ];
 __decorate([
     property({ type: Boolean })
@@ -1045,24 +693,12 @@ __decorate([
 __decorate([
     state()
 ], FtSearchBar.prototype, "suggestions", void 0);
-__decorate([
-    state()
-], FtSearchBar.prototype, "suggestionsLoaded", void 0);
 __decorate([
     state()
 ], FtSearchBar.prototype, "recentSearches", void 0);
 __decorate([
     state()
 ], FtSearchBar.prototype, "scrollToFacet", void 0);
-__decorate([
-    query(".ft-search-bar--suggestion:first-child")
-], FtSearchBar.prototype, "firstSuggestion", void 0);
-__decorate([
-    query(".ft-search-bar--suggestion:focus-within")
-], FtSearchBar.prototype, "focusedSuggestion", void 0);
-__decorate([
-    query(".ft-search-bar--suggestion:last-child")
-], FtSearchBar.prototype, "lastSuggestion", void 0);
 __decorate([
     state()
 ], FtSearchBar.prototype, "api", void 0);