@fluid-topics/ft-text-field 1.2.28 → 1.2.29

package/build/TextFieldSuggestionProvider.d.ts

@@ -0,0 +1,2 @@
+import { FtTextFieldSuggestionDefinition } from "./models";
+export declare function basicSuggestionsProvider(values: Array<string | FtTextFieldSuggestionDefinition>, maxSuggest?: number): (query: string) => FtTextFieldSuggestionDefinition[];

package/build/TextFieldSuggestionProvider.js

@@ -0,0 +1,18 @@
+export function basicSuggestionsProvider(values, maxSuggest = 20) {
+    return (query) => values.map(value => typeof value == "string" ? ({ value: value, label: value }) : value)
+        .filter(v => v.label.toLowerCase().includes(query.toLowerCase()))
+        .sort((a, b) => alphabeticalSortWithPriorToStartWithQuery(a.label, b.label, query))
+        .slice(0, maxSuggest);
+}
+function alphabeticalSortWithPriorToStartWithQuery(a, b, query) {
+    const lowerA = a.toLowerCase();
+    const lowerB = b.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    if (lowerA.startsWith(lowerQuery) && !lowerB.includes(lowerQuery)) {
+        return -1;
+    }
+    if (lowerB.startsWith(lowerQuery) && !lowerA.startsWith(lowerQuery)) {
+        return 1;
+    }
+    return lowerA.localeCompare(lowerB);
+}

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

@@ -2,6 +2,7 @@ import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTextFieldProperties } from "./ft-text-field.properties";
 import { FtTextFieldSuggestion } from "./ft-text-field-suggestion";
+import { FtTextFieldSuggestionDefinition } from "./models";
 declare const FtTextField_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
 export declare class FtTextField extends FtTextField_base implements FtTextFieldProperties {
     static elementDefinitions: ElementDefinitionsMap;
@@ -29,22 +30,26 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     maxLength?: number;
     password: boolean;
     autocomplete?: string;
+    suggestionsProvider?: (query: string) => FtTextFieldSuggestionDefinition[] | Promise<FtTextFieldSuggestionDefinition[]>;
     focused: boolean;
     hidePassword: boolean;
     hideSuggestions: boolean;
     visibleSuggestions: FtTextFieldSuggestion[];
+    providedSuggestions: FtTextFieldSuggestionDefinition[];
     mainPanel?: HTMLElement;
     input?: HTMLInputElement;
     newValueSuggestion?: FtTextFieldSuggestion;
     suggestionsContainer?: HTMLElement;
-    suggestions: FtTextFieldSuggestion[];
+    providedSuggestionsInDom: FtTextFieldSuggestion[];
+    slottedSuggestions: FtTextFieldSuggestion[];
     focus(): void;
-    constructor();
     protected render(): import("lit").TemplateResult<1>;
     private resolveInputType;
+    private renderSuggestions;
     private renderPasswordIcon;
     private renderIcon;
     protected update(props: PropertyValues): void;
+    private updateSuggestions;
     private filterSuggestionsIfNeeded;
     protected contentAvailableCallback(props: PropertyValues): void;
     private watchAutofillInterval?;
@@ -62,5 +67,6 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private togglePasswordVisibility;
     private isPasswordField;
     private setSuggestionPosition;
+    private suggestionsShouldBeDisplayed;
 }
 export {};

package/build/ft-text-field.js

@@ -5,7 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from "lit";
-import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { property, query, queryAll, queryAssignedElements, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { computeFlipOffsetPosition, FtLitElement, noTextInputDefaultClearButton, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
@@ -16,6 +17,25 @@ import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
 import { FtTextFieldCssVariables, styles } from "./ft-text-field.styles";
 import { FtTextFieldSuggestion } from "./ft-text-field-suggestion";
 class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
+    constructor() {
+        super(...arguments);
+        this._value = "";
+        this.dispatchedValue = "";
+        this.outlined = false;
+        this.disabled = false;
+        this.error = false;
+        this.fixedMenuPosition = false;
+        this.prefix = null;
+        this.passwordHiddenIcon = FtIcons.EYE_SLASH;
+        this.passwordRevealedIcon = FtIcons.EYE;
+        this.filterSuggestions = false;
+        this.password = false;
+        this.focused = false;
+        this.hidePassword = true;
+        this.hideSuggestions = false;
+        this.visibleSuggestions = [];
+        this.providedSuggestions = [];
+    }
     /*
      * We prevent lit from creating setter and getter to differentiate
      * when the value change comes from inside or outside the component
@@ -40,24 +60,6 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         var _a;
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    constructor() {
-        super();
-        this._value = "";
-        this.dispatchedValue = "";
-        this.outlined = false;
-        this.disabled = false;
-        this.error = false;
-        this.fixedMenuPosition = false;
-        this.prefix = null;
-        this.passwordHiddenIcon = FtIcons.EYE_SLASH;
-        this.passwordRevealedIcon = FtIcons.EYE;
-        this.filterSuggestions = false;
-        this.password = false;
-        this.focused = false;
-        this.hidePassword = true;
-        this.hideSuggestions = false;
-        this.visibleSuggestions = [];
-    }
     render() {
         const classes = {
             "ft-text-field": true,
@@ -69,11 +71,14 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             "ft-text-field--in-error": this.error,
             "ft-text-field--fixed": this.fixedMenuPosition,
             "ft-text-field--with-prefix": !!this.prefix,
-            "ft-text-field--hide-suggestions": this.hideSuggestions || this.visibleSuggestions.length == 0,
+            "ft-text-field--hide-suggestions": !this.suggestionsShouldBeDisplayed(),
             "ft-text-field--raised-label": this.focused || this.value != "",
             "ft-text-field--with-icon": !!this.icon,
             "ft-text-field--with-password": this.isPasswordField()
         };
+        const suggestionsAreProvidedAndQueryNotInPossiblesValues = this.suggestionsProvider && this.value && this.value != "" && !this.providedSuggestions.map(p => p.label).includes(this.value);
+        const suggestionsFromSlotAndQueryNotEmpty = !this.suggestionsProvider && this.filterSuggestions && this.value && this.value != "";
+        const shouldDisplayQueryAsNewSuggestion = suggestionsFromSlotAndQueryNotEmpty || suggestionsAreProvidedAndQueryNotInPossiblesValues;
         return html `
             <div class="${classMap(classes)}">
                 <div class="ft-text-field--main-panel"
@@ -109,12 +114,14 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
                     </div>
                     <div class="ft-text-field--suggestions"
                          @suggestion-selected=${this.onSuggestionSelected}>
-                        <slot @slotchange=${() => this.filterSuggestionsIfNeeded()}></slot>
-                        ${this.filterSuggestions && (this.value && this.value != "") ? html `
-                            <ft-text-field-suggestion class="ft-text-field-suggestion--new-value" helper="${this.suggestionsHelper}">
-                                ${this.value}
-                            </ft-text-field-suggestion>
-                        ` : nothing}
+                        ${this.renderSuggestions()}
+                        ${shouldDisplayQueryAsNewSuggestion
+            ? html `
+                                <ft-text-field-suggestion class="ft-text-field-suggestion--new-value" helper="${this.suggestionsHelper}">
+                                    ${this.value}
+                                </ft-text-field-suggestion>
+                            `
+            : nothing}
                     </div>
                 </div>
                 ${this.helper ? html `
@@ -132,6 +139,25 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         }
         return (_a = this.type) !== null && _a !== void 0 ? _a : "text";
     }
+    renderSuggestions() {
+        if (this.suggestionsProvider) {
+            return html `
+                ${repeat(this.providedSuggestions, suggestion => html `
+                        <ft-text-field-suggestion value=${suggestion.value} @click=${suggestion.clickHandler}>
+                            ${suggestion.icon ? html `
+                                                   <ft-icon .value=${suggestion.icon}></ft-icon>
+                                               `
+                : nothing}
+                            ${suggestion.label}
+                        </ft-text-field-suggestion>`)}
+            `;
+        }
+        else {
+            return html `
+                <slot @slotchange=${() => this.filterSuggestionsIfNeeded()}></slot>
+            `;
+        }
+    }
     renderPasswordIcon() {
         return html `
             <ft-icon class="ft-text-field--icon"
@@ -153,8 +179,11 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
     }
     update(props) {
         super.update(props);
-        if (props.has("value") || props.has("filterSuggestions")) {
-            this.filterSuggestionsIfNeeded();
+        if (props.has("value")
+            || props.has("filterSuggestions")
+            || props.has("suggestionsProvider")
+            || props.has("hideSuggestions")) {
+            this.updateSuggestions();
         }
         if (props.has("value") && props.get("value") != null) {
             this.hideSuggestions = false;
@@ -162,17 +191,22 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         if (props.has("dispatchedValue") && props.get("dispatchedValue") != null) {
             this.hideSuggestions = true;
         }
-        if (props.has("visibleSuggestions") && this.visibleSuggestions.length) {
-            this.setSuggestionPosition();
+    }
+    async updateSuggestions() {
+        if (this.suggestionsProvider) {
+            this.providedSuggestions = await this.suggestionsProvider(this.value);
+        }
+        else {
+            this.filterSuggestionsIfNeeded();
         }
     }
     filterSuggestionsIfNeeded() {
         if (this.filterSuggestions) {
-            this.suggestions.forEach(s => s.hidden = !s.getValue().toLowerCase().includes(this.value.toLowerCase()));
-            this.visibleSuggestions = this.suggestions.filter(s => !s.hidden);
+            this.slottedSuggestions.forEach(s => s.hidden = !s.getValue().toLowerCase().includes(this.value.toLowerCase()));
+            this.visibleSuggestions = this.slottedSuggestions.filter(s => !s.hidden);
         }
         else {
-            this.visibleSuggestions = this.suggestions;
+            this.visibleSuggestions = this.slottedSuggestions;
         }
         if (this.newValueSuggestion) {
             this.visibleSuggestions = [...this.visibleSuggestions, this.newValueSuggestion];
@@ -184,9 +218,15 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         if (props.has("focused") && !this.hideSuggestions && this.visibleSuggestions.length > 0) {
             this.setSuggestionPosition();
         }
+        if (props.has("value") && this.suggestionsProvider) {
+            this.visibleSuggestions = [...this.providedSuggestionsInDom];
+        }
         if (props.has("autocomplete")) {
             this.setupWatchAutofill();
         }
+        if (this.suggestionsShouldBeDisplayed()) {
+            this.setSuggestionPosition();
+        }
     }
     setupWatchAutofill() {
         var _a;
@@ -283,6 +323,9 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             this.suggestionsContainer.style.top = `${y}px`;
         });
     }
+    suggestionsShouldBeDisplayed() {
+        return !this.hideSuggestions && (this.visibleSuggestions.length || this.providedSuggestions.length);
+    }
 }
 FtTextField.elementDefinitions = {
     "ft-input-label": FtInputLabel,
@@ -357,6 +400,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtTextField.prototype, "autocomplete", void 0);
+__decorate([
+    property({ attribute: false })
+], FtTextField.prototype, "suggestionsProvider", void 0);
 __decorate([
     state()
 ], FtTextField.prototype, "focused", void 0);
@@ -369,6 +415,9 @@ __decorate([
 __decorate([
     state()
 ], FtTextField.prototype, "visibleSuggestions", void 0);
+__decorate([
+    state()
+], FtTextField.prototype, "providedSuggestions", void 0);
 __decorate([
     query(".ft-text-field--main-panel")
 ], FtTextField.prototype, "mainPanel", void 0);
@@ -381,7 +430,10 @@ __decorate([
 __decorate([
     query(".ft-text-field--suggestions")
 ], FtTextField.prototype, "suggestionsContainer", void 0);
+__decorate([
+    queryAll("ft-text-field-suggestion")
+], FtTextField.prototype, "providedSuggestionsInDom", void 0);
 __decorate([
     queryAssignedElements({ selector: "ft-text-field-suggestion" })
-], FtTextField.prototype, "suggestions", void 0);
+], FtTextField.prototype, "slottedSuggestions", void 0);
 export { FtTextField };