@fluid-topics/ft-search-bar 1.1.7 → 1.1.8

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

@@ -40,6 +40,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     selectedPreset?: string;
     priors?: Array<FtSearchPrior>;
     searchRequestSerializer: (request: FtSearchRequest) => string;
+    focusOnDisplay: boolean;
     private searchFilters;
     private sizeCategory;
     displayFacets: boolean;
@@ -58,6 +59,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     recentSearches: Array<string>;
     scrollToFacet?: string;
     api?: FluidTopicsApi;
+    reactToFocus: boolean;
     suggestManager: SuggestManager;
     selectedFacetsManager: FacetsChipsManager;
     desktopSearchBarManager: DesktopSearchBarManager;
@@ -71,7 +73,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private get hasPriors();
     hasLocaleSelector(): boolean;
     focus(): void;
-    focusInput(): void;
+    focusInput(): Promise<void>;
     clear(): void;
     protected render(): import("lit").TemplateResult<1>;
     protected renderSearchBar(): import("lit").TemplateResult<1>;
@@ -100,7 +102,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private initRecentSearches;
     saveRecentSearches(): void;
     private closeFloatingContainer;
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     private updateSize;
     setFilter(key: string, selectedValues: Array<string>): void;
@@ -111,4 +113,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     querySelector(selectors: string): HTMLElement | null;
     querySelectorAll(selectors: string): NodeListOf<HTMLElement>;
     renderDesktopFloatingMenu(): import("lit").TemplateResult<1> | typeof nothing;
+    private enableFocusReactionCallback;
+    private enableFocusReactionOnAnyUserInteraction;
+    private enableFocusReaction;
 }

package/build/ft-search-bar.js

@@ -7,7 +7,7 @@ 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 { Debouncer, flatDeep, FtLitElement, jsonProperty, ParametrizedLabelResolver, serializeRequest } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, flatDeep, FtLitElement, isTouchScreen, jsonProperty, ParametrizedLabelResolver, serializeRequest, waitFor } 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, selectedValues, unquote } from "./converters";
@@ -78,6 +78,7 @@ class FtSearchBar extends FtLitElement {
         this.presets = [];
         this.priors = [];
         this.searchRequestSerializer = (request) => serializeRequest(this.baseUrl, request);
+        this.focusOnDisplay = false;
         this.searchFilters = [];
         this.sizeCategory = FtSizeCategory.M;
         this.displayFacets = false;
@@ -88,6 +89,7 @@ class FtSearchBar extends FtLitElement {
         this.query = "";
         this.suggestions = [];
         this.recentSearches = [];
+        this.reactToFocus = true;
         this.suggestManager = new SuggestManager(this);
         this.selectedFacetsManager = new FacetsChipsManager(this);
         this.desktopSearchBarManager = new DesktopSearchBarManager(this);
@@ -108,6 +110,7 @@ class FtSearchBar extends FtLitElement {
         this.compareRequests = (a, b) => (a.contentLocale == null || b.contentLocale == null || a.contentLocale === b.contentLocale)
             && a.filters.length === b.filters.length
             && a.filters.every(fa => b.filters.some(fb => this.compareFilters(fa, fb)));
+        this.enableFocusReactionCallback = () => this.enableFocusReaction();
     }
     isMobileMenuOpen() {
         return this.isMobile() && (this.forceMobileMenuOpen || this.forceMenuOpen || this.mobileMenuOpen);
@@ -163,13 +166,9 @@ 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);
-        }
+    async focusInput() {
+        await waitFor(() => this.input, 50);
+        this.input.focus();
     }
     clear() {
         this.query = "";
@@ -190,9 +189,9 @@ class FtSearchBar extends FtLitElement {
         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>
+                <ft-skeleton class="ft-search-bar--container ft-search-bar--skeleton"
+                             part="loader"
+                             tabindex="-1"></ft-skeleton>
             `;
     }
     renderMobileFacets() {
@@ -220,31 +219,31 @@ class FtSearchBar extends FtLitElement {
             const keyWithNoColumn = facet.key.replace(":", "-");
             const values = selectedValues(filter);
             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>
-                                        ${values.length > 0 ? html `
-                                            <ft-typography class="ft-search-bar--filter-label-values" variant="body2">
-                                                ${values.join(", ")}
-                                            </ft-typography>
-                                        ` : nothing}
-                                    </div>
-                                    <ft-filter
-                                            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}
-                                            .displayedValuesLimit=${10}
-                                            @change=${(e) => this.setFilter(filter.id, e.detail)}
-                                    ></ft-filter>
-                                </ft-accordion-item>
-                            ` : nothing;
+                            <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>
+                                    ${values.length > 0 ? html `
+                                        <ft-typography class="ft-search-bar--filter-label-values" variant="body2">
+                                            ${values.join(", ")}
+                                        </ft-typography>
+                                    ` : nothing}
+                                </div>
+                                <ft-filter
+                                    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}
+                                    .displayedValuesLimit=${10}
+                                    @change=${(e) => this.setFilter(filter.id, e.detail)}
+                                ></ft-filter>
+                            </ft-accordion-item>
+                        ` : nothing;
         })}
             </ft-accordion>
         `;
@@ -253,18 +252,18 @@ class FtSearchBar extends FtLitElement {
         var _a;
         return html `
             <ft-radio-group
-                    @change=${(e) => {
+                @change=${(e) => {
             this.contentLocale = (e.detail === "all" ? undefined : e.detail);
             this.clearFilters();
         }}>
                 ${repeat(((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []), locale => locale.lang, locale => {
             var _a;
             return html `
-                                    <ft-radio value="${(_a = locale.lang) !== null && _a !== void 0 ? _a : "all"}"
-                                              ?checked=${locale.lang == this.contentLocale}>
-                                        ${locale.label}
-                                    </ft-radio>
-                                `;
+                            <ft-radio value="${(_a = locale.lang) !== null && _a !== void 0 ? _a : "all"}"
+                                      ?checked=${locale.lang == this.contentLocale}>
+                                ${locale.label}
+                            </ft-radio>
+                        `;
         })}
             </ft-radio-group>
         `;
@@ -292,17 +291,17 @@ class FtSearchBar extends FtLitElement {
             <div class="ft-search-bar--facets-actions">
                 ${this.hasPresets ? html `
                     <ft-select
-                            class="ft-search-bar--presets"
-                            part="presets"
-                            label="${this.labelResolver.resolve("presetsSelector")}"
-                            outlined
-                            @change=${(e) => this.selectedPreset = e.detail}>
+                        class="ft-search-bar--presets"
+                        part="presets"
+                        label="${this.labelResolver.resolve("presetsSelector")}"
+                        outlined
+                        @change=${(e) => this.selectedPreset = e.detail}>
                         ${repeat((_a = this.presets) !== null && _a !== void 0 ? _a : [], p => p.name, p => html `
-                                    <ft-select-option value="${p.name}"
-                                                      label="${p.name}"
-                                                      ?selected=${p.name === this.selectedPreset}>
-                                    </ft-select-option>
-                                `)}
+                                <ft-select-option value="${p.name}"
+                                                  label="${p.name}"
+                                                  ?selected=${p.name === this.selectedPreset}>
+                                </ft-select-option>
+                            `)}
                     </ft-select>
                 ` : nothing}
                 <slot name="facets-actions"></slot>
@@ -343,23 +342,23 @@ class FtSearchBar extends FtLitElement {
             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 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}
-                                        .displayedValuesLimit=${10}
-                                        @change=${(e) => this.setFilter(filter.id, e.detail)}
-                                ></ft-filter>
-                            `;
+                            <ft-filter
+                                class="${hierachical ? "ft-search-bar--hierarchical-filter" : ""}"
+                                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}
+                                .displayedValuesLimit=${10}
+                                @change=${(e) => this.setFilter(filter.id, e.detail)}
+                            ></ft-filter>
+                        `;
         })}
             </ft-snap-scroll>
         `;
@@ -555,10 +554,15 @@ class FtSearchBar extends FtLitElement {
             url: window.location.href
         }));
     }
-    connectedCallback() {
+    async connectedCallback() {
         super.connectedCallback();
         document.addEventListener("focusin", this.closeFloatingContainer);
         document.addEventListener("click", this.closeFloatingContainer);
+        if (this.focusOnDisplay && !isTouchScreen) {
+            this.reactToFocus = false;
+            await this.focusInput();
+            this.enableFocusReactionOnAnyUserInteraction();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -615,6 +619,19 @@ class FtSearchBar extends FtLitElement {
                 ${this.renderDesktopMenu()}
             </div>`;
     }
+    enableFocusReactionOnAnyUserInteraction() {
+        var _a, _b, _c;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.addEventListener("blur", this.enableFocusReactionCallback);
+        (_b = this.container) === null || _b === void 0 ? void 0 : _b.addEventListener("click", this.enableFocusReactionCallback);
+        (_c = this.container) === null || _c === void 0 ? void 0 : _c.addEventListener("keyup", this.enableFocusReactionCallback);
+    }
+    enableFocusReaction() {
+        var _a, _b, _c;
+        this.reactToFocus = true;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.removeEventListener("blur", this.enableFocusReactionCallback);
+        (_b = this.container) === null || _b === void 0 ? void 0 : _b.removeEventListener("click", this.enableFocusReactionCallback);
+        (_c = this.container) === null || _c === void 0 ? void 0 : _c.removeEventListener("keyup", this.enableFocusReactionCallback);
+    }
 }
 FtSearchBar.elementDefinitions = {
     "ft-accordion": FtAccordion,
@@ -690,6 +707,9 @@ __decorate([
 __decorate([
     property()
 ], FtSearchBar.prototype, "searchRequestSerializer", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchBar.prototype, "focusOnDisplay", void 0);
 __decorate([
     state()
 ], FtSearchBar.prototype, "searchFilters", void 0);
@@ -738,6 +758,9 @@ __decorate([
 __decorate([
     state()
 ], FtSearchBar.prototype, "api", void 0);
+__decorate([
+    state()
+], FtSearchBar.prototype, "reactToFocus", void 0);
 __decorate([
     state()
 ], FtSearchBar.prototype, "facetsLoaded", void 0);