@fluid-topics/ft-search-bar 0.2.15 → 0.2.18

package/build/ft-search-bar.css.d.ts

@@ -7,6 +7,7 @@ export declare const FtSearchBarCssVariables: {
     mobileOpenBottom: FtCssVariable;
     mobileOpenLeft: FtCssVariable;
     mobileOpenRight: FtCssVariable;
+    desktopFiltersHeight: FtCssVariable;
     floatingZIndex: FtCssVariable;
     colorSurface: FtCssVariable;
     colorOnSurface: FtCssVariable;

package/build/ft-search-bar.css.js

@@ -6,6 +6,7 @@ import { FtSelectCssVariables } from "@fluid-topics/ft-select";
 import { FtSnapScrollCssVariables } from "@fluid-topics/ft-snap-scroll";
 import { FtChipCssVariables } from "@fluid-topics/ft-chip";
 import { FtSkeletonCssVariables } from "@fluid-topics/ft-skeleton";
+import { FtTooltipCssVariables } from "@fluid-topics/ft-tooltip";
 export const FtSearchBarCssVariables = {
     height: FtCssVariable.create("--ft-search-bar-height", "SIZE", "38px"),
     borderRadius: FtCssVariable.extend("--ft-search-bar-border-radius", designSystemVariables.borderRadiusS),
@@ -14,7 +15,8 @@ export const FtSearchBarCssVariables = {
     mobileOpenBottom: FtCssVariable.create("--ft-search-bar-mobile-open-bottom", "SIZE", "0"),
     mobileOpenLeft: FtCssVariable.create("--ft-search-bar-mobile-open-left", "SIZE", "0"),
     mobileOpenRight: FtCssVariable.create("--ft-search-bar-mobile-open-right", "SIZE", "0"),
-    floatingZIndex: FtCssVariable.create("--ft-search-bar-floating-components-z-index", "NUMBER", "2"),
+    desktopFiltersHeight: FtCssVariable.create("--ft-search-bar-desktop-filters-height", "SIZE", "350px"),
+    floatingZIndex: FtCssVariable.create("--ft-search-bar-floating-components-z-index", "NUMBER", "3"),
     colorSurface: FtCssVariable.external(designSystemVariables.colorSurface, "Design system"),
     colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
     colorOnSurfaceMedium: FtCssVariable.external(designSystemVariables.colorOnSurfaceMedium, "Design system"),
@@ -50,9 +52,16 @@ export const searchBarCss = css `
         right: ${FtSearchBarCssVariables.mobileOpenRight};
         z-index: ${FtSearchBarCssVariables.floatingZIndex};
         padding: 16px;
+    }
+
+    .ft-search-bar--mobile-menu-open:not(.ft-search-bar--forced-open) {
         background: ${FtSearchBarCssVariables.colorSurface};
     }
 
+    .ft-search-bar--mobile-menu-open.ft-search-bar--forced-open {
+        position: ${FtSearchBarCssVariables.mobileOpenPosition.get("static")};
+    }
+
     .ft-search-bar {
         position: relative;
         display: flex;
@@ -106,12 +115,12 @@ export const searchBarCss = css `
         flex-grow: 1;
         border: none;
         background-color: transparent;
+        color: ${FtSearchBarCssVariables.colorOnSurface};
         outline: none;
     }
 
-    .ft-search-bar--desktop .ft-search-bar--input {
-        flex-shrink: 0;
-        min-width: 250px;
+    .ft-search-bar--input::placeholder {
+        color: ${FtSearchBarCssVariables.colorOnSurfaceMedium};
     }
 
     .ft-search-bar--actions {
@@ -121,7 +130,7 @@ export const searchBarCss = css `
         align-items: center;
         height: 100%;
 
-        --ft-tooltip-z-index: 3;
+        ${setVariable(FtTooltipCssVariables.zIndex, `calc(${FtSearchBarCssVariables.floatingZIndex} + 1)`)};
     }
 
     .ft-search-bar > ft-button,
@@ -179,23 +188,31 @@ export const searchBarCss = css `
 `;
 //language=css
 export const facetsCss = css `
-    .ft-search-bar--floating-panel .ft-search-bar--presets {
+    .ft-search-bar--desktop-menu .ft-search-bar--presets {
         margin-right: auto;
     }
 
-    .ft-search-bar--floating-panel .ft-search-bar--presets {
+    .ft-search-bar--desktop-menu .ft-search-bar--presets {
         min-width: 250px;
         ${setVariable(FtSelectCssVariables.optionsZIndex, "2")};
     }
 
-    .ft-search-bar--floating-panel {
+    .ft-search-bar--desktop-menu {
+        display: flex;
         flex-direction: column;
         gap: 16px;
+    }
+
+    .ft-search-bar + .ft-search-bar--desktop-menu {
+        margin-top: 8px;
+    }
+
+    .ft-search-bar--floating-panel {
         padding: 16px;
     }
 
     .ft-search-bar--floating-panel-open .ft-search-bar--floating-panel {
-        display: flex;
+        display: block;
     }
 
     .ft-search-bar--desktop .ft-search-bar--facets-actions {
@@ -203,6 +220,9 @@ export const facetsCss = css `
         align-items: center;
         justify-content: flex-end;
         gap: 8px;
+    }
+
+    .ft-search-bar--floating-panel .ft-search-bar--facets-actions {
         padding: 0 10px;
     }
 
@@ -224,13 +244,13 @@ export const facetsCss = css `
         display: none;
     }
 
-    .ft-search-bar--floating-panel .ft-search-bar--filters-container {
+    .ft-search-bar--desktop-menu .ft-search-bar--filters-container {
         display: block;
-        height: 350px;
+        height: ${FtSearchBarCssVariables.desktopFiltersHeight};
         --ft-snap-scroll-gap: 16px;
     }
 
-    .ft-search-bar--floating-panel ft-filter {
+    .ft-search-bar--desktop-menu ft-filter {
         display: flex;
         flex-grow: 0;
         max-height: 100%;
@@ -294,7 +314,7 @@ export const facetsCss = css `
         padding-right: 0;
     }
 
-    .ft-search-bar--floating-panel .ft-search-bar--launch-search {
+    .ft-search-bar--desktop-menu .ft-search-bar--launch-search {
         margin: 0;
     }
 `;
@@ -350,7 +370,7 @@ export const suggestionsCss = css `
     .ft-search-bar--floating-panel,
     .ft-search-bar--desktop .ft-search-bar--suggestions {
         position: absolute;
-        z-index: var(--ft-search-bar-floating-components-z-index, 1);
+        z-index: ${FtSearchBarCssVariables.floatingZIndex};
         top: 100%;
         left: -1px;
         right: -1px;

package/build/ft-search-bar.d.ts

@@ -16,6 +16,7 @@ export interface FtSearchBarLabels extends ParametrizedLabels {
     clearInputButton?: string;
     clearFilterButton?: string;
     displayMoreFilterValuesButton?: string;
+    noFilterValuesAvailable?: string;
     searchButton?: string;
     noSuggestions?: string;
     contentLocaleSelector?: string;
@@ -28,7 +29,7 @@ export declare type DisplayMode = "auto" | "mobile" | "desktop";
 export interface FtSearchBarProperties {
     labels?: FtSearchBarLabels;
     mode?: DisplayMode;
-    forceMobileMenuOpen?: boolean;
+    forceMenuOpen?: boolean;
     baseUrl: string;
     apiIntegrationIdentifier?: string;
     contentLocale?: string;
@@ -52,6 +53,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     dense: boolean;
     mode?: DisplayMode;
     forceMobileMenuOpen: boolean;
+    forceMenuOpen: boolean;
     baseUrl: string;
     apiIntegrationIdentifier: string;
     contentLocale?: string;
@@ -107,9 +109,11 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private renderMobileFacets;
     private contentLocalesAsFilterOptions;
     private renderDesktopSearchBar;
+    private renderDesktopMenu;
     private renderSearchBarLeftAction;
     private renderDesktopSearchBarButtons;
     private renderFacetsActions;
+    private renderDesktopClearFilters;
     private renderDesktopFacets;
     private renderSelectedFacets;
     private renderSuggestions;

package/build/ft-search-bar.js

@@ -34,6 +34,7 @@ export const DEFAULT_LABELS = {
     clearInputButton: "Clear",
     clearFilterButton: "Clear",
     displayMoreFilterValuesButton: "More",
+    noFilterValuesAvailable: "No values available",
     searchButton: "Search",
     noSuggestions: "No results found…",
     clearFilters: "Clear filters",
@@ -57,12 +58,15 @@ export class SearchStateChangeEvent extends CustomEvent {
         super("change", { detail: request });
     }
 }
+const doNothing = () => {
+};
 export class FtSearchBar extends FtLitElement {
     constructor() {
         super(...arguments);
         this.dense = false;
         this.mode = "auto";
         this.forceMobileMenuOpen = false;
+        this.forceMenuOpen = false;
         this.baseUrl = "";
         this.apiIntegrationIdentifier = "ft-search-bar";
         this.availableContentLocales = [];
@@ -79,7 +83,7 @@ export class FtSearchBar extends FtLitElement {
         this.mobileMenuOpen = false;
         this.facets = [];
         this.facetsInitialized = false;
-        this.knownFacetLabels = {};
+        this.knownFacetLabels = new Map();
         this.query = "";
         this.suggestions = [];
         this.suggestionsLoaded = true;
@@ -101,7 +105,7 @@ export class FtSearchBar extends FtLitElement {
             && a.filters.every(fa => b.filters.some(fb => this.compareFilters(fa, fb)));
     }
     get isMobileMenuOpen() {
-        return this.forceMobileMenuOpen || this.mobileMenuOpen;
+        return this.isMobile && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
     }
     get recentSearchesStorageKey() {
         return this.baseUrl + ":ft:recent-search-queries";
@@ -119,7 +123,8 @@ export class FtSearchBar extends FtLitElement {
         };
     }
     get facetsRequest() {
-        const fromFilters = this.searchFilters.filter(f => !this.displayedFilters.includes(f.key)).map(f => ({ id: f.key }));
+        const fromFilters = this.searchFilters.filter(f => f.values.length > 0 && !this.displayedFilters.includes(f.key))
+            .map(f => ({ id: f.key }));
         return [...this.displayedFilters.map(id => ({ id })), ...fromFilters];
     }
     get suggestRequest() {
@@ -177,8 +182,9 @@ export class FtSearchBar extends FtLitElement {
             "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,
+            "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">
@@ -220,8 +226,9 @@ export class FtSearchBar extends FtLitElement {
         `;
     }
     renderMobileSearchBarButtons() {
-        if (this.query || this.isMobileMenuOpen) {
-            return html `
+        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"
@@ -229,16 +236,15 @@ export class FtSearchBar extends FtLitElement {
                                icon="close"
                                round
                                label="${this.labelResolver.resolve("clearInputButton")}"
+                               tooltipPosition="left"
                                @click=${() => {
-                this.setQuery("");
-                this.mobileMenuOpen = false;
-                this.displayFacets = false;
-            }}
+            this.setQuery("");
+            this.mobileMenuOpen = false;
+            this.displayFacets = false;
+        }}
                     ></ft-button>
                 </div>
-            `;
-        }
-        return html `
+            ` : nothing}
             <div class="ft-search-bar--actions"
                  part="search-bar-actions">
                 <ft-button class="ft-search-bar--launch-search"
@@ -246,7 +252,8 @@ export class FtSearchBar extends FtLitElement {
                            icon="search"
                            round
                            label="${this.labelResolver.resolve("searchButton")}"
-                           @click=${() => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }}
+                           tooltipPosition="left"
+                           @click=${() => { var _a; return this.isMobileMenuOpen ? this.launchSearch() : (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }}
                 ></ft-button>
             </div>
         `;
@@ -266,7 +273,8 @@ export class FtSearchBar extends FtLitElement {
                             </ft-typography>
                         </div>
                         <ft-filter
-                                part="filters"
+                                part="filters filter-ft-locale"
+                                .exportpartsPrefixes=${["filter", "filter-ft-locale"]}
                                 class="ft-search-bar--content-locale"
                                 filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", this.labelResolver.resolve("contentLocaleSelector"))}"
                                 .options=${(this.contentLocalesAsFilterOptions())}
@@ -276,7 +284,8 @@ export class FtSearchBar extends FtLitElement {
                 ` : null}
                 ${repeat(this.facets, facet => facet.key, facet => {
             const filter = facetToFilter(facet);
-            return html `
+            const keyWithNoColumn = facet.key.replace(":", "-");
+            return facet.rootNodes.length > 0 ? html `
                                 <ft-accordion-item data-facet-key="${facet.key}">
                                     <div class="ft-search-bar--filter-label" slot="toggle">
                                         <ft-typography variant="button">${facet.label}</ft-typography>
@@ -285,11 +294,13 @@ export class FtSearchBar extends FtLitElement {
                                         </ft-typography>
                                     </div>
                                     <ft-filter
-                                            part="filters"
+                                            part="filters filter filter-${keyWithNoColumn}"
+                                            .exportpartsPrefixes=${["filter", "filter-" + keyWithNoColumn]}
                                             id="${filter.id}"
                                             filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", filter.label)}"
                                             clearButtonLabel="${this.labelResolver.resolve("clearFilterButton")}"
                                             moreValuesButtonLabel="${this.labelResolver.resolve("displayMoreFilterValuesButton")}"
+                                            noValuesLabel="${this.labelResolver.resolve("noFilterValuesAvailable")}"
                                             ?multivalued=${filter.multivalued}
                                             raiseSelectedOptions
                                             .options=${filter.options}
@@ -297,7 +308,7 @@ export class FtSearchBar extends FtLitElement {
                                             @change=${(e) => this.setFilter(filter.id, e.detail)}
                                     ></ft-filter>
                                 </ft-accordion-item>
-                            `;
+                            ` : nothing;
         })}
             </ft-accordion>
         `;
@@ -327,25 +338,36 @@ export class FtSearchBar extends FtLitElement {
                     ${this.renderSuggestions()}
                 </div>
                 ${this.renderDesktopSearchBarButtons()}
-                <div class="ft-search-bar--floating-panel" @keyup=${this.onFloatingContainerKeyUp} tabindex="-1">
-                    ${this.renderFacetsActions()}
-                    ${this.renderDesktopFacets()}
-                    <div class="ft-search-bar--facets-actions">
-                        <ft-button class="ft-search-bar--launch-search"
-                                   part="launch-search-in-panel"
-                                   icon="search"
-                                   @click=${this.launchSearch}>
-                            ${this.labelResolver.resolve("searchButton")}
-                        </ft-button>
-                    </div>
-                </div>
+                ${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 ? nothing : this.renderSelectedFacets()}
+            ${this.dense || this.forceMenuOpen ? (this.forceMenuOpen ? this.renderDesktopMenu() : nothing) : this.renderSelectedFacets()}
         `;
     }
+    renderDesktopMenu() {
+        return this.hasFacets ? html `
+            <div class="ft-search-bar--desktop-menu">
+                ${this.renderFacetsActions()}
+                ${this.renderDesktopFacets()}
+                <div class="ft-search-bar--facets-actions">
+                    ${this.forceMenuOpen ? this.renderDesktopClearFilters() : nothing}
+                    <ft-button class="ft-search-bar--launch-search"
+                               part="launch-search-in-panel"
+                               icon="search"
+                               @click=${this.launchSearch}>
+                        ${this.labelResolver.resolve("searchButton")}
+                    </ft-button>
+                </div>
+            </div>
+        ` : nothing;
+    }
     renderSearchBarLeftAction() {
         if (this.hasFacets) {
-            return html `
+            return this.forceMenuOpen ? nothing : html `
                 <ft-button class="ft-search-bar--filters-opener ft-search-bar--left-action"
                            part="filters-opener"
                            trailingIcon
@@ -359,11 +381,12 @@ export class FtSearchBar extends FtLitElement {
                 </ft-button>
             `;
         }
-        if (this.hasLocaleSelector) {
+        else if (this.hasLocaleSelector) {
             return html `
                 <ft-select outlined
                            class="ft-search-bar--content-locale ft-search-bar--left-action"
-                           part="content-locale"
+                           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}
@@ -419,16 +442,19 @@ export class FtSearchBar extends FtLitElement {
                                 `)}
                     </ft-select>
                 ` : nothing}
-                ${this.searchFilters.length > 0 ? html `
-                    <ft-button part="facets-actions"
-                               @click=${this.clearFilters}>
-                        ${this.labelResolver.resolve("clearFilters")}
-                    </ft-button>
-                ` : nothing}
                 <slot name="facets-actions"></slot>
+                ${this.forceMenuOpen && !this.isMobile ? nothing : this.renderDesktopClearFilters()}
             </div>
         `;
     }
+    renderDesktopClearFilters() {
+        return this.searchFilters.length > 0 ? html `
+            <ft-button part="facets-actions"
+                       @click=${this.clearFilters}>
+                ${this.labelResolver.resolve("clearFilters")}
+            </ft-button>
+        ` : nothing;
+    }
     renderDesktopFacets() {
         if (!this.hasFacets) {
             return nothing;
@@ -436,10 +462,12 @@ export class FtSearchBar extends FtLitElement {
         return html `
             <ft-snap-scroll horizontal limitSize controls
                             class="ft-search-bar--filters-container"
-                            part="filters-container">
+                            part="filters-container"
+                            exportpartsPrefix="filters-container">
                 ${this.hasLocaleSelector ? html `
-                    <ft-filter part="filters"
-                               class="ft-search-bar--content-locale"
+                    <ft-filter class="ft-search-bar--content-locale"
+                               part="filters filter-ft-locale"
+                               .exportpartsPrefixes=${["filter", "filter-ft-locale"]}
                                label="${this.labelResolver.resolve("contentLocaleSelector")}"
                                filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", this.labelResolver.resolve("contentLocaleSelector"))}"
                                .options=${(this.contentLocalesAsFilterOptions())}
@@ -449,15 +477,18 @@ export class FtSearchBar extends FtLitElement {
                 ${repeat(this.facets, facet => facet.key, facet => {
             const filter = facetToFilter(facet);
             const hierachical = filter.options.some(o => { var _a, _b; return ((_b = (_a = o.subOptions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0; });
+            const keyWithNoColumn = facet.key.replace(":", "-");
             return html `
                                 <ft-filter
                                         class="${hierachical ? "ft-search-bar--hierarchical-filter" : ""}"
-                                        part="filters"
+                                        part="filters filter filter-${keyWithNoColumn}"
+                                        .exportpartsPrefixes=${["filter", "filter-" + keyWithNoColumn]}
                                         id="${filter.id}"
                                         label="${filter.label}"
                                         filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", filter.label)}"
                                         clearButtonLabel="${this.labelResolver.resolve("clearFilterButton")}"
                                         moreValuesButtonLabel="${this.labelResolver.resolve("displayMoreFilterValuesButton")}"
+                                        noValuesLabel="${this.labelResolver.resolve("noFilterValuesAvailable")}"
                                         ?multivalued=${filter.multivalued}
                                         raiseSelectedOptions
                                         .options=${filter.options}
@@ -476,7 +507,7 @@ export class FtSearchBar extends FtLitElement {
         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"
+                <ft-chip part="selected-filters selected-filter-ft-locale"
                          ?dense=${this.dense && !this.isMobile}
                          ?clickable=${this.isMobile}
                          @click=${() => this.openMobileFilters("ft:contentLocale")}>
@@ -487,9 +518,10 @@ export class FtSearchBar extends FtLitElement {
             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"
+                                                part="selected-filters selected-filter-${keyWithNoColumn}"
                                                 ?dense=${this.dense && !this.isMobile}
                                                 ?clickable=${this.isMobile}
                                                 ?removable=${!this.isMobile}
@@ -509,7 +541,7 @@ export class FtSearchBar extends FtLitElement {
             });
         })}
             ${this.isMobile ? html `
-                <ft-chip part="selected-filters"
+                <ft-chip part="selected-filters mobile-filters-opener"
                          icon="add"
                          clickable
                          @click=${() => {
@@ -524,7 +556,8 @@ export class FtSearchBar extends FtLitElement {
             ? html `
                     <ft-snap-scroll horizontal controls hideScrollbar limitSize
                                     class="ft-search-bar--selected-filters"
-                                    part="selected-filters-container">
+                                    part="selected-filters-container"
+                                    exportpartsPrefix="selected-filters-container">
                         ${filters}
                     </ft-snap-scroll>
                 `
@@ -539,6 +572,7 @@ export class FtSearchBar extends FtLitElement {
         const shouldDisplaySuggestions = this.query.length > 2 || 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 })}"
@@ -554,6 +588,7 @@ export class FtSearchBar extends FtLitElement {
                                            part="remove-suggestion"
                                            ?dense=${!this.isMobile}
                                            label="${this.labelResolver.resolve("removeRecentSearch")}"
+                                           tooltipPosition="left"
                                            @click=${(e) => this.removeRecentSearch(e, query)}></ft-button>
                             </a>
                         `)}
@@ -640,6 +675,9 @@ export class FtSearchBar extends FtLitElement {
                 this.setFiltersFromPreset(currentPreset);
             }
         }
+        if (props.has("contentLocale") && this.contentLocale != null) {
+            this.knownFacetLabels = new Map();
+        }
         if (["contentLocale", "searchFilters"].some(p => props.has(p))) {
             this.selectedPreset = (_f = ((_e = this.presets) !== null && _e !== void 0 ? _e : []).find(p => this.compareRequests(p, this.request))) === null || _f === void 0 ? void 0 : _f.name;
         }
@@ -694,9 +732,27 @@ export class FtSearchBar extends FtLitElement {
             if (this.facetsRequest.length > 0) {
                 this.facetsLoaded = false;
                 this.updateFacetsDebouncer.run(async () => {
-                    var _a, _b;
-                    this.facets = (_b = await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets).catch(() => []))) !== null && _b !== void 0 ? _b : [];
-                    this.facets.forEach(f => this.knownFacetLabels[f.key] = f.label);
+                    var _a;
+                    const retrievedFacets = new Map();
+                    await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.search({ ...this.request, query: "" }).then(r => r.facets.forEach(f => {
+                        this.knownFacetLabels.set(f.key, f.label);
+                        retrievedFacets.set(f.key, f);
+                    })).catch(doNothing));
+                    this.facets = [];
+                    for (let r of this.facetsRequest) {
+                        if (retrievedFacets.has(r.id)) {
+                            this.facets.push(retrievedFacets.get(r.id));
+                        }
+                        else if (this.knownFacetLabels.has(r.id)) {
+                            this.facets.push({
+                                key: r.id,
+                                label: this.knownFacetLabels.get(r.id),
+                                rootNodes: [],
+                                multiSelectionable: true,
+                                hierarchical: false
+                            });
+                        }
+                    }
                     this.facetsLoaded = true;
                     this.facetsInitialized = true;
                 });
@@ -887,6 +943,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtSearchBar.prototype, "forceMobileMenuOpen", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchBar.prototype, "forceMenuOpen", void 0);
 __decorate([
     property()
 ], FtSearchBar.prototype, "baseUrl", void 0);