@fluid-topics/ft-search-bar 1.2.2 → 1.2.3

package/README.md

@@ -32,13 +32,12 @@ import "@fluid-topics/public-api/dist/fluidtopics.min.js"
 import "@fluid-topics/ft-search-bar"
 
 function render() {
-    return html` 
-        <ft-search-bar 
+    return html`
+        <ft-search-bar
             baseUrl="http://doc.fluidtopics.com"
             .displayedFilters=${ [ "Version_FT", "Category", "Platform", "audience" ] }
             @change=${ (e: SearchStateChangeEvent) => console.log("Search state change:", e.detail) }
-            @launch-search=${ (e: LaunchSearchEvent) => console.log("Launch search:", e.detail) }
-        ></ft-search-bar> 
+        ></ft-search-bar>
     `
 }
 ```
@@ -67,10 +66,6 @@ function render() {
                                                             filtersButton: "Refine your search",
                                                             inputPlaceHolder: "Search our documentation"
                                                         }));
-        searchBar.addEventListener("launch-search", event => {
-            console.log("Launch search:", event.detail)
-            console.log("URL:", searchBar.searchRequestSerializer(event.detail))
-        });
     </script>
 </body>
 </html>

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

@@ -1,6 +1,7 @@
 import { nothing, PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
 import { FluidTopicsApi, FtSearchFacet, FtSearchFacetConf, FtSearchLocale, FtSearchPreset, FtSearchPrior, FtSearchRequest, FtSuggestRequest, FtSuggestResult } from "@fluid-topics/public-api";
+import { FtButton } from "@fluid-topics/ft-button";
 import { SuggestManager } from "./managers/SuggestManager";
 import { FacetsChipsManager } from "./managers/FacetsChipsManager";
 import { MobileSearchBarManager } from "./managers/MobileSearchBarManager";
@@ -14,9 +15,6 @@ declare global {
     }
 }
 export declare const DEFAULT_LABELS: FtSearchBarLabels;
-export declare class LaunchSearchEvent extends CustomEvent<FtSearchRequest> {
-    constructor(request: FtSearchRequest);
-}
 export declare class SearchStateChangeEvent extends CustomEvent<FtSearchRequest> {
     constructor(request: FtSearchRequest);
 }
@@ -54,6 +52,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private floatingContainer?;
     private scrollingFiltersContainer?;
     input?: HTMLInputElement;
+    launchSearchButton?: FtButton;
     query: string;
     suggestions: Array<FtSuggestResult>;
     recentSearches: Array<string>;
@@ -97,7 +96,7 @@ export declare class FtSearchBar extends FtLitElement implements FtSearchBarProp
     private retrieveFacetsFromSearch;
     private onFloatingContainerKeyUp;
     setQuery(query: string): void;
-    launchSearch(): void;
+    onLaunchSearch(): void;
     private get recentSearchesStorageKey();
     private initRecentSearches;
     saveRecentSearches(): void;

package/build/ft-search-bar.js

@@ -47,15 +47,6 @@ export const DEFAULT_LABELS = {
     back: "Back",
     selectLocale: "Select a language"
 };
-export class LaunchSearchEvent extends CustomEvent {
-    constructor(request) {
-        super("launch-search", {
-            detail: request,
-            bubbles: true,
-            composed: true
-        });
-    }
-}
 export class SearchStateChangeEvent extends CustomEvent {
     constructor(request) {
         super("change", { detail: request });
@@ -318,9 +309,10 @@ class FtSearchBar extends FtLitElement {
                 <div class="ft-search-bar--facets-actions">
                     ${this.forceMenuOpen ? this.renderDesktopClearFilters() : nothing}
                     <ft-button class="ft-search-bar--launch-search"
+                               href="${this.searchRequestSerializer(this.request)}"
                                part="launch-search-in-panel"
                                icon="search"
-                               @click=${this.launchSearch}>
+                               @click=${() => this.onLaunchSearch()}>
                         ${this.labelResolver.resolve("searchButton")}
                     </ft-button>
                 </div>
@@ -551,7 +543,7 @@ class FtSearchBar extends FtLitElement {
         }
         this.query = query;
     }
-    launchSearch() {
+    onLaunchSearch() {
         if (this.query) {
             let filteredRecentSearches = this.recentSearches
                 .filter(q => q.toLowerCase() !== this.query.toLowerCase())
@@ -559,7 +551,6 @@ class FtSearchBar extends FtLitElement {
             this.recentSearches = [this.query, ...filteredRecentSearches];
             this.saveRecentSearches();
         }
-        this.dispatchEvent(new LaunchSearchEvent(this.request));
         this.mobileMenuOpen = false;
         this.displayFacets = false;
         this.focus();
@@ -588,14 +579,14 @@ class FtSearchBar extends FtLitElement {
         if (this.focusOnDisplay && !isTouchScreen) {
             this.focusInput();
         }
-        ftAppInfoStore.eventBus.addEventListener("authentication-change", this.initSearchData);
+        ftAppInfoStore.addEventListener("authentication-change", this.initSearchData);
         this.initSearchData();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener("focusin", this.closeFloatingContainer);
         document.addEventListener("click", this.closeFloatingContainer);
-        ftAppInfoStore.eventBus.removeEventListener("authentication-change", this.initSearchData);
+        ftAppInfoStore.removeEventListener("authentication-change", this.initSearchData);
     }
     updateSize(e) {
         this.sizeCategory = e.detail.category;
@@ -772,6 +763,9 @@ __decorate([
 __decorate([
     query(".ft-search-bar--input")
 ], FtSearchBar.prototype, "input", void 0);
+__decorate([
+    query(".ft-search-bar--launch-search")
+], FtSearchBar.prototype, "launchSearchButton", void 0);
 __decorate([
     state()
 ], FtSearchBar.prototype, "query", void 0);