@fluid-topics/ft-text-field 1.2.49 → 1.2.50

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

@@ -46,6 +46,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     protected render(): import("lit-html").TemplateResult<1>;
     private resolveInputType;
     private renderSuggestions;
+    private onSuggestionClick;
     private renderPasswordIcon;
     private renderIcon;
     protected update(props: PropertyValues): void;

package/build/ft-text-field.js

@@ -143,7 +143,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         if (this.suggestionsProvider) {
             return html `
                 ${repeat(this.providedSuggestions, suggestion => html `
-                        <ft-text-field-suggestion value=${suggestion.value} @click=${suggestion.clickHandler}>
+                        <ft-text-field-suggestion value=${suggestion.value} @click=${(e) => this.onSuggestionClick(e, suggestion.clickHandler)}>
                             ${suggestion.icon ? html `
                                                    <ft-icon .value=${suggestion.icon}></ft-icon>
                                                `
@@ -158,6 +158,12 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             `;
         }
     }
+    onSuggestionClick(event, handler) {
+        if (handler) {
+            event.preventDefault();
+            handler(event);
+        }
+    }
     renderPasswordIcon() {
         return html `
             <ft-icon class="ft-text-field--icon"

package/build/ft-text-field.light.js

@@ -682,7 +682,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
             </div>
         `}resolveInputType(){var r;return this.isPasswordField()?this.hidePassword?"password":"text":(r=this.type)!==null&&r!==void 0?r:"text"}renderSuggestions(){return this.suggestionsProvider?A.html`
                 ${(0,To.repeat)(this.providedSuggestions,r=>A.html`
-                        <ft-text-field-suggestion value=${r.value} @click=${r.clickHandler}>
+                        <ft-text-field-suggestion value=${r.value} @click=${i=>this.onSuggestionClick(i,r.clickHandler)}>
                             ${r.icon?A.html`
                                                    <ft-icon .value=${r.icon}></ft-icon>
                                                `:A.nothing}
@@ -690,7 +690,7 @@ Also for action icons.`,t.colorGray200),contentGlobalSubtle:e.extend("--ft-conte
                         </ft-text-field-suggestion>`)}
             `:A.html`
                 <slot @slotchange=${()=>this.filterSuggestionsIfNeeded()}></slot>
-            `}renderPasswordIcon(){return A.html`
+            `}onSuggestionClick(r,i){i&&(r.preventDefault(),i(r))}renderPasswordIcon(){return A.html`
             <ft-icon class="ft-text-field--icon"
                      .variant=${this.iconVariant}
                      .value=${this.hidePassword?this.passwordHiddenIcon:this.passwordRevealedIcon}

package/build/ft-text-field.min.js

@@ -726,7 +726,7 @@ Also for action icons.`,l.colorGray200),contentGlobalSubtle:r.extend("--ft-conte
             </div>
         `}resolveInputType(){var e;return this.isPasswordField()?this.hidePassword?"password":"text":(e=this.type)!==null&&e!==void 0?e:"text"}renderSuggestions(){return this.suggestionsProvider?Z`
                 ${go(this.providedSuggestions,e=>Z`
-                        <ft-text-field-suggestion value=${e.value} @click=${e.clickHandler}>
+                        <ft-text-field-suggestion value=${e.value} @click=${o=>this.onSuggestionClick(o,e.clickHandler)}>
                             ${e.icon?Z`
                                                    <ft-icon .value=${e.icon}></ft-icon>
                                                `:M}
@@ -734,7 +734,7 @@ Also for action icons.`,l.colorGray200),contentGlobalSubtle:r.extend("--ft-conte
                         </ft-text-field-suggestion>`)}
             `:Z`
                 <slot @slotchange=${()=>this.filterSuggestionsIfNeeded()}></slot>
-            `}renderPasswordIcon(){return Z`
+            `}onSuggestionClick(e,o){o&&(e.preventDefault(),o(e))}renderPasswordIcon(){return Z`
             <ft-icon class="ft-text-field--icon"
                      .variant=${this.iconVariant}
                      .value=${this.hidePassword?this.passwordHiddenIcon:this.passwordRevealedIcon}

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

@@ -1,3 +1,4 @@
+import { FtTextFieldSuggestionDefinition } from "./models";
 export interface FtTextFieldProperties {
     label?: string;
     value?: string;
@@ -15,5 +16,5 @@ export interface FtTextFieldProperties {
     suggestionsHelper?: string;
     maxLength?: number;
     password?: boolean;
-    suggestionsProvider?: Function;
+    suggestionsProvider?: (query: string) => FtTextFieldSuggestionDefinition[] | Promise<FtTextFieldSuggestionDefinition[]>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-text-field",
-  "version": "1.2.49",
+  "version": "1.2.50",
   "description": "A fluidtopics text field",
   "keywords": [
     "Lit"
@@ -19,12 +19,12 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.2.49",
-    "@fluid-topics/ft-input-label": "1.2.49",
-    "@fluid-topics/ft-ripple": "1.2.49",
-    "@fluid-topics/ft-typography": "1.2.49",
-    "@fluid-topics/ft-wc-utils": "1.2.49",
+    "@fluid-topics/ft-icon": "1.2.50",
+    "@fluid-topics/ft-input-label": "1.2.50",
+    "@fluid-topics/ft-ripple": "1.2.50",
+    "@fluid-topics/ft-typography": "1.2.50",
+    "@fluid-topics/ft-wc-utils": "1.2.50",
     "lit": "3.1.0"
   },
-  "gitHead": "eac6d1d34424e5f5ca7e20068e646caeba2e15a7"
+  "gitHead": "2cc419b6e01ae50f6ecba171e7b700507a6a85a0"
 }