@fluid-topics/ft-search-input 1.2.1 → 1.2.3

package/build/ft-search-input-suggestion.d.ts

@@ -7,8 +7,12 @@ export declare class SuggestionSelectedEvent extends CustomEvent<string> {
 export declare class FtSearchInputSuggestion extends FtSearchComponent implements FtSearchInputSuggestionProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
+    private request?;
     private suggestResults?;
+    launchSearchPath?: string;
     render(): import("lit").TemplateResult<1>;
+    private renderSuggestion;
+    private onSuggestLinkClick;
     private onSuggestKeyDown;
     private onSuggestKeyUp;
     private onSuggestSelected;

package/build/ft-search-input-suggestion.js

@@ -6,13 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { redux, wordWrap } from "@fluid-topics/ft-wc-utils";
 import { html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { suggestionStyles } from "./ft-search-input-suggestion.styles";
 import { repeat } from "lit/directives/repeat.js";
 import { FtIcon, FtIcons, FtIconVariants, resolveFileFormatIcon } from "@fluid-topics/ft-icon";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
+import { SearchPlaceConverterProvider } from "@fluid-topics/ft-app-context";
 export class SuggestionSelectedEvent extends CustomEvent {
     constructor(value) {
         super("suggestion-selected", { detail: value });
@@ -20,24 +21,52 @@ export class SuggestionSelectedEvent extends CustomEvent {
 }
 let FtSearchInputSuggestion = class FtSearchInputSuggestion extends FtSearchComponent {
     render() {
+        const searchPlaceConverter = SearchPlaceConverterProvider.get();
         return html `
             <div class="ft-search-input-suggestion ft-word-wrap"
                  part="container"
                  @keydown=${(e) => this.onSuggestKeyDown(e)}>
-                ${repeat(this.suggestResults || [], suggest => suggest.value, suggest => html `
-                            <a href="#"
-                               part="suggestion"
-                               class="ft-search-input-suggestion--suggestion"
-                               @keyup=${(e) => this.onSuggestKeyUp(e, suggest.value)}
-                               @click=${(e) => this.onSuggestSelected(e, suggest.value)}>
-                                <ft-ripple></ft-ripple>
-                                ${this.getIcon(suggest)}
-                                <ft-typography variant="body1">${suggest.value}</ft-typography>
-                            </a>
-                        `)}
+                ${repeat(this.suggestResults || [], suggest => suggest.value, suggest => {
+            return this.renderSuggestion(suggest, searchPlaceConverter);
+        })}
             </div>
         `;
     }
+    renderSuggestion(suggest, searchPlaceConverter) {
+        if (this.launchSearchPath) {
+            const suggestRequest = { ...this.request, query: suggest.value };
+            const launchSuggestUrl = searchPlaceConverter.serializeToCurrentPageIfPossible(suggestRequest, this.launchSearchPath);
+            return html `
+                <a href="${launchSuggestUrl}"
+                   part="suggestion"
+                   class="ft-search-input-suggestion--suggestion"
+                   @keyup=${(e) => this.onSuggestKeyUp(e)}
+                   @click=${(e) => this.onSuggestLinkClick(e, suggest)}>
+                    <ft-ripple></ft-ripple>
+                    ${this.getIcon(suggest)}
+                    <ft-typography variant="body1">${suggest.value}</ft-typography>
+                </a>
+            `;
+        }
+        return html `
+            <div tabindex="0"
+                 part="suggestion"
+                 class="ft-search-input-suggestion--suggestion"
+                 @keyup=${(e) => this.onSuggestKeyUp(e)}
+                 @click=${(e) => this.onSuggestSelected(suggest.value)}>
+                <ft-ripple></ft-ripple>
+                ${this.getIcon(suggest)}
+                <ft-typography variant="body1">${suggest.value}</ft-typography>
+            </div>
+        `;
+    }
+    onSuggestLinkClick(e, suggest) {
+        if (!e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        this.onSuggestSelected(suggest.value);
+    }
     onSuggestKeyDown(e) {
         var _a, _b, _c, _d, _e, _f;
         switch (e.key) {
@@ -53,13 +82,14 @@ let FtSearchInputSuggestion = class FtSearchInputSuggestion extends FtSearchComp
                 break;
         }
     }
-    onSuggestKeyUp(e, suggest) {
+    onSuggestKeyUp(e) {
         if (e.key === "Enter" || e.key === " ") {
-            this.onSuggestSelected(e, suggest);
+            e.preventDefault();
+            e.stopPropagation();
+            e.target.click();
         }
     }
-    onSuggestSelected(e, suggest) {
-        e.preventDefault();
+    onSuggestSelected(suggest) {
         this.dispatchEvent(new SuggestionSelectedEvent(suggest));
     }
     getIcon(suggest) {
@@ -104,9 +134,15 @@ FtSearchInputSuggestion.styles = [
     wordWrap,
     suggestionStyles,
 ];
+__decorate([
+    redux()
+], FtSearchInputSuggestion.prototype, "request", void 0);
 __decorate([
     redux()
 ], FtSearchInputSuggestion.prototype, "suggestResults", void 0);
+__decorate([
+    property()
+], FtSearchInputSuggestion.prototype, "launchSearchPath", void 0);
 FtSearchInputSuggestion = __decorate([
     customElement("ft-search-input-suggestion")
 ], FtSearchInputSuggestion);

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

@@ -10,8 +10,11 @@ export declare class FtSearchInput extends FtSearchInput_base implements FtSearc
     private liveQuery;
     private suggestResults?;
     private forceCloseSuggestion;
+    launchSearchPath?: string;
+    useCustomSearchPath: boolean;
     private input;
     private suggestion;
+    private launchSearchButton;
     protected render(): import("lit").TemplateResult<1>;
     private onSearchBarKeyDown;
     private onSearchBarKeyUp;

package/build/ft-search-input.js

@@ -10,16 +10,18 @@ import { styles } from "./ft-search-input.styles";
 import { FtSearchComponent } from "@fluid-topics/ft-search-context/build/registration";
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { searchInputContext } from "./SearchInputMessages";
-import { query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { FtSearchInputSuggestion } from "./ft-search-input-suggestion";
 import { FtButton } from "@fluid-topics/ft-button";
 import { FtTypographyBody2 } from "@fluid-topics/ft-typography";
+import { SearchPlaceConverterProvider } from "@fluid-topics/ft-app-context";
 class FtSearchInput extends withI18n(FtSearchComponent) {
     constructor() {
         super();
         this.liveQuery = "";
         this.forceCloseSuggestion = false;
+        this.useCustomSearchPath = false;
         this.addI18nContext(searchInputContext);
     }
     render() {
@@ -29,6 +31,9 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
             "ft-search-input--with-suggestions": (_b = (_a = this.suggestResults) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 > 0,
             "ft-search-input--with-suggestions-closed": this.forceCloseSuggestion,
         };
+        const liveRequest = { ...this.request, query: this.liveQuery };
+        const searchPage = this.useCustomSearchPath ? this.launchSearchPath : undefined;
+        const launchSearchUrl = SearchPlaceConverterProvider.get().serializeToCurrentPageIfPossible(liveRequest, searchPage);
         return html `
             <div class="${classMap(classes)}" @focusout=${() => this.forceCloseSuggestion = false} role="search">
                 <div class="ft-search-input--input-container" part="input-container" tabindex="-1">
@@ -43,6 +48,8 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                                @keyup=${(e) => this.onSearchBarKeyUp(e)}>
                     </div>
                     <ft-search-input-suggestion exportpartsPrefix="suggestion"
+                                                .request=${this.request}
+                                                .launchSearchPath=${searchPage}
                                                 @suggestion-selected=${this.onSuggestionSelected}
                     ></ft-search-input-suggestion>
                 </div>
@@ -55,7 +62,8 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                                    round dense
                                    label="${searchInputContext.messages.clearButton()}"
                                    @click=${() => {
-            this.liveQuery = "";
+            var _a;
+            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setLiveQuery("");
             this.input.focus();
         }}
                         ></ft-button>
@@ -66,6 +74,7 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                                icon="search"
                                round dense
                                label="${searchInputContext.messages.searchButton()}"
+                               href="${this.useCustomSearchPath ? launchSearchUrl : ""}"
                                @click=${() => this.launchSearch(this.liveQuery)}
                     ></ft-button>
                 </div>
@@ -90,7 +99,12 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
                 e.stopPropagation();
                 break;
             case "Enter":
-                this.launchSearch(this.input.value);
+                if (this.useCustomSearchPath) {
+                    this.launchSearchButton.click();
+                }
+                else {
+                    this.launchSearch(this.liveQuery);
+                }
                 break;
             default:
                 break;
@@ -103,11 +117,13 @@ class FtSearchInput extends withI18n(FtSearchComponent) {
     }
     launchSearch(query) {
         var _a;
-        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(query);
         this.forceCloseSuggestion = true;
         this.dispatchEvent(new CustomEvent("change", { detail: query }));
+        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.setQuery(query);
     }
     onSuggestionSelected(e) {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
         this.launchSearch(e.detail);
     }
 }
@@ -132,10 +148,19 @@ __decorate([
 __decorate([
     state()
 ], FtSearchInput.prototype, "forceCloseSuggestion", void 0);
+__decorate([
+    property()
+], FtSearchInput.prototype, "launchSearchPath", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchInput.prototype, "useCustomSearchPath", void 0);
 __decorate([
     query(".ft-search-input--input")
 ], FtSearchInput.prototype, "input", void 0);
 __decorate([
     query("ft-search-input-suggestion")
 ], FtSearchInput.prototype, "suggestion", void 0);
+__decorate([
+    query(`[part="launch-search-in-input"]`)
+], FtSearchInput.prototype, "launchSearchButton", void 0);
 export { FtSearchInput };