@fluid-topics/ft-text-field 2.2.4 → 2.2.6

package/build/ft-text-field.d.ts

@@ -31,6 +31,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     password: boolean;
     autocomplete?: string;
     suggestionsProvider?: (query: string) => FtTextFieldSuggestionDefinition[] | Promise<FtTextFieldSuggestionDefinition[]>;
+    hideCurrentValueSuggestion: boolean;
     focused: boolean;
     inputValid: boolean;
     hidePassword: boolean;
@@ -52,6 +53,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private renderPasswordIcon;
     private renderIcon;
     protected update(props: PropertyValues): void;
+    private cancelableSuggest?;
     private updateSuggestions;
     private filterSuggestionsIfNeeded;
     protected contentAvailableCallback(props: PropertyValues): void;

package/build/ft-text-field.js

@@ -9,7 +9,7 @@ import { property, query, queryAll, queryAssignedElements, state, } from "lit/de
 import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { computeOffsetAutoPosition, FtLitElement, ignoreComposingEvents, noTextInputDefaultClearButton, numberProperty, toFtFormComponent, } from "@fluid-topics/ft-wc-utils";
+import { cancelable, computeOffsetAutoPosition, FtLitElement, ignoreComposingEvents, noTextInputDefaultClearButton, numberProperty, toFtFormComponent, } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyBody1, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
@@ -31,6 +31,7 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
         this.passwordRevealedIcon = FtIcons.EYE;
         this.filterSuggestions = false;
         this.password = false;
+        this.hideCurrentValueSuggestion = false;
         this.focused = false;
         this.inputValid = true;
         this.hidePassword = true;
@@ -118,18 +119,22 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
                                ?disabled=${this.disabled}
                                .value=${this.value}
                                @click=${this.handleClick}
-                               @keydown=${this.handleInput}
-                               @keyup=${this.catchComposingEvents}
+                               @keyup=${this.handleInput}
+                               @keydown=${this.catchComposingEvents}
                                @focus=${this.onFocus}
                         />
                         ${this.renderIcon()}
                     </div>
                     <div class="ft-text-field--suggestions"
+                         part="suggestions"
                          @suggestion-selected=${this.onSuggestionSelected}>
                         ${this.renderSuggestions()}
-                        ${shouldDisplayQueryAsNewSuggestion
+                        ${!this.hideCurrentValueSuggestion && shouldDisplayQueryAsNewSuggestion
             ? html `
-                                <ft-text-field-suggestion class="ft-text-field-suggestion--new-value" helper="${this.suggestionsHelper}">
+                                <ft-text-field-suggestion
+                                    class="ft-text-field-suggestion--new-value"
+                                    part="suggestion current-value-suggestion"
+                                    helper="${this.suggestionsHelper}">
                                     ${this.value}
                                 </ft-text-field-suggestion>
                             `
@@ -155,7 +160,7 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
         if (this.suggestionsProvider) {
             return html `
                 ${repeat(this.providedSuggestions, (suggestion) => html `
-                        <ft-text-field-suggestion value="${suggestion.value}" @click=${(e) => this.onSuggestionClick(e, suggestion.clickHandler)}>
+                        <ft-text-field-suggestion part="suggestion" value="${suggestion.value}" @click=${(e) => this.onSuggestionClick(e, suggestion.clickHandler)}>
                             ${suggestion.icon ? html `
                                                    <ft-icon .value=${suggestion.icon}></ft-icon>
                                                `
@@ -211,8 +216,18 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
         }
     }
     async updateSuggestions() {
+        var _a;
         if (this.suggestionsProvider) {
-            this.providedSuggestions = await this.suggestionsProvider(this.value);
+            (_a = this.cancelableSuggest) === null || _a === void 0 ? void 0 : _a.cancel();
+            const result = this.suggestionsProvider(this.value);
+            if (result instanceof Promise) {
+                this.cancelableSuggest = cancelable(result);
+                this.providedSuggestions = await this.cancelableSuggest;
+            }
+            else {
+                this.cancelableSuggest = undefined;
+                this.providedSuggestions = result;
+            }
         }
         else {
             this.filterSuggestionsIfNeeded();
@@ -432,6 +447,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], FtTextField.prototype, "suggestionsProvider", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtTextField.prototype, "hideCurrentValueSuggestion", void 0);
 __decorate([
     state()
 ], FtTextField.prototype, "focused", void 0);