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

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

@@ -52,6 +52,9 @@ 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};
     }
 
@@ -112,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 {
@@ -387,12 +390,6 @@ export const suggestionsCss = css `
         display: block;
     }
 
-    .ft-search-bar--no-suggestions {
-        text-align: center;
-        padding: 8px;
-        color: ${FtSearchBarCssVariables.colorOnSurface};
-    }
-
     .ft-search-bar--suggestion {
         text-decoration: none;
         position: relative;

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

@@ -18,7 +18,6 @@ export interface FtSearchBarLabels extends ParametrizedLabels {
     displayMoreFilterValuesButton?: string;
     noFilterValuesAvailable?: string;
     searchButton?: string;
-    noSuggestions?: string;
     contentLocaleSelector?: string;
     presetsSelector?: string;
     removeRecentSearch?: string;
@@ -90,7 +89,6 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private lastSuggestion?;
     private updateFacetsDebouncer;
     private suggestDebouncer;
-    private get recentSearchesStorageKey();
     private api?;
     get request(): FtSearchRequest;
     get facetsRequest(): Array<FtSearchFacetConf>;
@@ -101,6 +99,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private get hasPriors();
     private get hasLocaleSelector();
     focus(): void;
+    focusInput(): void;
     clear(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     protected renderSearchBar(): import("lit-html").TemplateResult<1>;
@@ -135,6 +134,8 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private onSuggestKeyUp;
     private onSuggestSelected;
     private launchSearch;
+    private get recentSearchesStorageKey();
+    private initRecentSearches;
     private saveRecentSearches;
     private closeFloatingContainer;
     connectedCallback(): void;

package/build/ft-search-bar.js

@@ -36,7 +36,6 @@ export const DEFAULT_LABELS = {
     displayMoreFilterValuesButton: "More",
     noFilterValuesAvailable: "No values available",
     searchButton: "Search",
-    noSuggestions: "No results found…",
     clearFilters: "Clear filters",
     contentLocaleSelector: "Lang",
     presetsSelector: "Preset",
@@ -107,9 +106,6 @@ export class FtSearchBar extends FtLitElement {
     get isMobileMenuOpen() {
         return this.isMobile && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
     }
-    get recentSearchesStorageKey() {
-        return this.baseUrl + ":ft:recent-search-queries";
-    }
     get request() {
         return {
             uiLocale: this.uiLocale,
@@ -123,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() {
@@ -160,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 = [];
@@ -190,7 +195,8 @@ export class FtSearchBar extends FtLitElement {
                 ${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() {
@@ -272,6 +278,7 @@ export class FtSearchBar extends FtLitElement {
                             </ft-typography>
                         </div>
                         <ft-filter
+                                id="ft:locale"
                                 part="filters filter-ft-locale"
                                 .exportpartsPrefixes=${["filter", "filter-ft-locale"]}
                                 class="ft-search-bar--content-locale"
@@ -323,7 +330,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"
@@ -339,6 +346,7 @@ export class FtSearchBar extends FtLitElement {
                 ${this.renderDesktopSearchBarButtons()}
                 ${this.forceMenuOpen ? nothing : html `
                             <div class="ft-search-bar--floating-panel" @keyup=${this.onFloatingContainerKeyUp}
+                                 part="floating-panel"
                                  tabindex="-1">
                                 ${this.renderDesktopMenu()}
                             </div>`}
@@ -383,7 +391,8 @@ export class FtSearchBar extends FtLitElement {
             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}
@@ -462,13 +471,15 @@ export class FtSearchBar extends FtLitElement {
                             part="filters-container"
                             exportpartsPrefix="filters-container">
                 ${this.hasLocaleSelector ? html `
-                    <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())}
-                               @change=${(e) => this.contentLocale = e.detail[0]}
+                    <ft-filter
+                            id="ft:locale"
+                            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())}
+                            @change=${(e) => this.contentLocale = e.detail[0]}
                     ></ft-filter>
                 ` : nothing}
                 ${repeat(this.facets, facet => facet.key, facet => {
@@ -507,7 +518,9 @@ export class FtSearchBar extends FtLitElement {
                 <ft-chip part="selected-filters selected-filter-ft-locale"
                          ?dense=${this.dense && !this.isMobile}
                          ?clickable=${this.isMobile}
-                         @click=${() => this.openMobileFilters("ft:contentLocale")}>
+                         @click=${() => this.openMobileFilters("ft:contentLocale")}
+                         data-key="ft:locale"
+                         data-value="${this.contentLocale}">
                     ${(this.getLocaleLabel(this.contentLocale))}
                 </ft-chip>
             ` : null}
@@ -526,7 +539,9 @@ export class FtSearchBar extends FtLitElement {
                                                 label="${label}"
                                                 title=${useSnapScroll ? label : nothing}
                                                 @click=${() => this.openMobileFilters(facet.key)}
-                                                @icon-click=${() => this.setFilter(facet.key, values.filter(v => v !== value))}>
+                                                @icon-click=${() => this.setFilter(facet.key, values.filter(v => v !== value))}
+                                                data-key="${facet.key}"
+                                                data-value="${value}">
                                             ${getLabelFromValue(value)}
                                         </ft-chip>
                                     `;
@@ -566,9 +581,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 })}"
@@ -599,13 +615,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>
         `;
     }
@@ -639,9 +648,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);
         }
@@ -660,13 +674,13 @@ 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);
             }
@@ -675,7 +689,7 @@ export class FtSearchBar extends FtLitElement {
             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;
@@ -828,8 +842,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();