@fluid-topics/ft-search-bar 0.2.16 → 0.2.19

package/build/ft-search-bar.js

@@ -34,8 +34,8 @@ export const DEFAULT_LABELS = {
     clearInputButton: "Clear",
     clearFilterButton: "Clear",
     displayMoreFilterValuesButton: "More",
+    noFilterValuesAvailable: "No values available",
     searchButton: "Search",
-    noSuggestions: "No results found…",
     clearFilters: "Clear filters",
     contentLocaleSelector: "Lang",
     presetsSelector: "Preset",
@@ -57,12 +57,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 +82,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,10 +104,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;
-    }
-    get recentSearchesStorageKey() {
-        return this.baseUrl + ":ft:recent-search-queries";
+        return this.isMobile && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
     }
     get request() {
         return {
@@ -119,7 +119,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() {
@@ -156,6 +157,14 @@ export class FtSearchBar extends FtLitElement {
         var _a;
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    focusInput() {
+        if (this.input) {
+            this.input.focus();
+        }
+        else {
+            setTimeout(() => this.focusInput(), 50);
+        }
+    }
     clear() {
         this.query = "";
         this.searchFilters = [];
@@ -177,15 +186,16 @@ 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">
                 ${this.isMobile ? this.renderMobileSearchBar() : this.renderDesktopSearchBar()}
             </div>
         ` : html `
-            <ft-skeleton class="ft-search-bar--skeleton" part="loader"></ft-skeleton>
+            <ft-skeleton class="ft-search-bar--container ft-search-bar--skeleton" part="loader" tabindex="-1"></ft-skeleton>
         `;
     }
     renderMobileSearchBar() {
@@ -268,7 +278,7 @@ export class FtSearchBar extends FtLitElement {
                         </div>
                         <ft-filter
                                 part="filters filter-ft-locale"
-                                exportparts=${this.getFilterExportParts("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())}
@@ -279,7 +289,7 @@ export class FtSearchBar extends FtLitElement {
                 ${repeat(this.facets, facet => facet.key, facet => {
             const filter = facetToFilter(facet);
             const keyWithNoColumn = facet.key.replace(":", "-");
-            return html `
+            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>
@@ -288,12 +298,13 @@ export class FtSearchBar extends FtLitElement {
                                         </ft-typography>
                                     </div>
                                     <ft-filter
-                                            part="filters filter-${keyWithNoColumn}"
-                                            exportparts=${this.getFilterExportParts(keyWithNoColumn)}
+                                            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}
@@ -301,7 +312,7 @@ export class FtSearchBar extends FtLitElement {
                                             @change=${(e) => this.setFilter(filter.id, e.detail)}
                                     ></ft-filter>
                                 </ft-accordion-item>
-                            `;
+                            ` : nothing;
         })}
             </ft-accordion>
         `;
@@ -317,7 +328,7 @@ export class FtSearchBar extends FtLitElement {
         return html `
             <div class="ft-search-bar" part="search-bar">
                 ${(this.renderSearchBarLeftAction())}
-                <div class="ft-search-bar--input-container" part="input-container">
+                <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"
@@ -331,25 +342,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
@@ -363,11 +385,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}
@@ -423,16 +446,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;
@@ -441,11 +467,11 @@ export class FtSearchBar extends FtLitElement {
             <ft-snap-scroll horizontal limitSize controls
                             class="ft-search-bar--filters-container"
                             part="filters-container"
-                            exportparts="controls:snap-scroll-controls">
+                            exportpartsPrefix="filters-container">
                 ${this.hasLocaleSelector ? html `
                     <ft-filter class="ft-search-bar--content-locale"
                                part="filters filter-ft-locale"
-                               exportparts=${this.getFilterExportParts("ft-locale")}
+                               .exportpartsPrefixes=${["filter", "filter-ft-locale"]}
                                label="${this.labelResolver.resolve("contentLocaleSelector")}"
                                filterPlaceHolder="${this.labelResolver.resolve("filterInputPlaceHolder", this.labelResolver.resolve("contentLocaleSelector"))}"
                                .options=${(this.contentLocalesAsFilterOptions())}
@@ -459,13 +485,14 @@ export class FtSearchBar extends FtLitElement {
             return html `
                                 <ft-filter
                                         class="${hierachical ? "ft-search-bar--hierarchical-filter" : ""}"
-                                        part="filters filter-${keyWithNoColumn}"
-                                        exportparts=${this.getFilterExportParts(keyWithNoColumn)}
+                                        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}
@@ -484,7 +511,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")}>
@@ -495,9 +522,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}
@@ -517,7 +545,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=${() => {
@@ -533,7 +561,7 @@ export class FtSearchBar extends FtLitElement {
                     <ft-snap-scroll horizontal controls hideScrollbar limitSize
                                     class="ft-search-bar--selected-filters"
                                     part="selected-filters-container"
-                                    exportparts="controls:snap-scroll-controls">
+                                    exportpartsPrefix="selected-filters-container">
                         ${filters}
                     </ft-snap-scroll>
                 `
@@ -545,9 +573,10 @@ export class FtSearchBar extends FtLitElement {
     }
     renderSuggestions() {
         const filteredRecentSearches = this.recentSearches.filter(q => q.toLowerCase().includes(this.query.toLowerCase()));
-        const shouldDisplaySuggestions = this.query.length > 2 || filteredRecentSearches.length > 0;
+        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 })}"
@@ -578,13 +607,6 @@ export class FtSearchBar extends FtLitElement {
                                 <ft-typography variant="body1">${suggest.value}</ft-typography>
                             </a>
                         `)}
-                ${filteredRecentSearches.length === 0 && this.suggestions.length === 0 && this.query.length > 2 && this.suggestionsLoaded
-            ? html `
-                            <ft-typography class="ft-search-bar--no-suggestions" element="p"
-                                           variant="body2">
-                                ${this.labelResolver.resolve("noSuggestions")}
-                            </ft-typography>
-                        ` : null}
             </div>
         `;
     }
@@ -618,9 +640,14 @@ export class FtSearchBar extends FtLitElement {
     async firstUpdated(props) {
         super.firstUpdated(props);
         this.initApi();
+        window.addEventListener("storage", (e) => {
+            if (e.key === this.recentSearchesStorageKey) {
+                this.initRecentSearches();
+            }
+        });
     }
     update(props) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         if (props.has("labels")) {
             this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, this.labels);
         }
@@ -639,19 +666,22 @@ export class FtSearchBar extends FtLitElement {
             if (this.baseUrl.endsWith("/")) {
                 this.baseUrl = this.baseUrl.replace(/\/$/, "");
             }
-            this.recentSearches = JSON.parse((_b = window.localStorage.getItem(this.recentSearchesStorageKey)) !== null && _b !== void 0 ? _b : "[]");
+            this.initRecentSearches();
         }
         if (props.has("presets")) {
-            ((_c = this.presets) !== null && _c !== void 0 ? _c : []).forEach(preset => preset.filters.forEach(filter => filter.values = filter.values.map(v => unquote(v))));
+            ((_b = this.presets) !== null && _b !== void 0 ? _b : []).forEach(preset => preset.filters.forEach(filter => filter.values = filter.values.map(v => unquote(v))));
         }
         if (props.has("selectedPreset")) {
-            const currentPreset = ((_d = this.presets) !== null && _d !== void 0 ? _d : []).find(p => p.name === this.selectedPreset);
+            const currentPreset = ((_c = this.presets) !== null && _c !== void 0 ? _c : []).find(p => p.name === this.selectedPreset);
             if (currentPreset && !this.compareRequests(this.request, currentPreset)) {
                 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;
+            this.selectedPreset = (_e = ((_d = this.presets) !== null && _d !== void 0 ? _d : []).find(p => this.compareRequests(p, this.request))) === null || _e === void 0 ? void 0 : _e.name;
         }
         if (["baseUrl", "apiIntegrationIdentifier"].some(p => props.has(p))) {
             this.api = undefined;
@@ -704,9 +734,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;
                 });
@@ -786,8 +834,22 @@ export class FtSearchBar extends FtLitElement {
         this.displayFacets = false;
         this.focus();
     }
+    get recentSearchesStorageKey() {
+        return this.baseUrl + ":ft:recent-search-queries";
+    }
+    initRecentSearches() {
+        var _a;
+        this.recentSearches = JSON.parse((_a = window.localStorage.getItem(this.recentSearchesStorageKey)) !== null && _a !== void 0 ? _a : "[]");
+    }
     saveRecentSearches() {
-        window.localStorage.setItem(this.recentSearchesStorageKey, JSON.stringify(this.recentSearches));
+        const newValue = JSON.stringify(this.recentSearches);
+        window.localStorage.setItem(this.recentSearchesStorageKey, newValue);
+        window.dispatchEvent(new StorageEvent("storage", {
+            key: this.recentSearchesStorageKey,
+            newValue,
+            storageArea: window.localStorage,
+            url: window.location.href
+        }));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -863,12 +925,6 @@ export class FtSearchBar extends FtLitElement {
                 break;
         }
     }
-    getFilterExportParts(metadataKey) {
-        return ["container", "header", "clear-button", "input"].map(part => this.getFilterSubPartExportAttribute(part, metadataKey)).join(",");
-    }
-    getFilterSubPartExportAttribute(part, metadataKey) {
-        return `${part}:filters-${part},${part}:filter-${metadataKey}-${part}`;
-    }
 }
 FtSearchBar.elementDefinitions = {
     "ft-accordion": FtAccordion,
@@ -903,6 +959,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);