@fluid-topics/ft-search-bar 0.2.14 → 0.2.17

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";
@@ -177,8 +181,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 +225,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 +235,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 +251,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 +272,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 +283,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 +293,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 +307,7 @@ export class FtSearchBar extends FtLitElement {
                                             @change=${(e) => this.setFilter(filter.id, e.detail)}
                                     ></ft-filter>
                                 </ft-accordion-item>
-                            `;
+                            ` : nothing;
         })}
             </ft-accordion>
         `;
@@ -327,25 +337,35 @@ 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}
+                                 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,7 +379,7 @@ 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"
@@ -419,16 +439,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 +459,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 +474,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 +504,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 +515,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 +538,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 +553,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>
                 `
@@ -554,6 +584,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 +671,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 +728,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 +939,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);