@fluid-topics/ft-text-field 1.2.27 → 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,23 +30,33 @@ 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?;
+    private setupWatchAutofill;
+    private clearWatchAutofill;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     setValue(newValue: string, fireChangeEvent?: boolean): void;
     private handleInput;
     private handleClick;
@@ -54,6 +65,8 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private onFocus;
     private onMainPanelBlur;
     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";
@@ -13,9 +14,28 @@ import { FtTypography, FtTypographyBody1 } from "@fluid-topics/ft-typography";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
-import { styles } from "./ft-text-field.styles";
+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,26 +60,7 @@ 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() {
-        var _a;
         const classes = {
             "ft-text-field": true,
             "ft-text-field--filled": !this.outlined,
@@ -70,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.password
+            "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"
@@ -94,7 +98,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
                                     ${this.prefix}
                                 </ft-typography>
                             ` : nothing}
-                        <input type=${(_a = this.type) !== null && _a !== void 0 ? _a : ((this.password && this.hidePassword) ? "password" : "text")}
+                        <input type=${this.resolveInputType()}
                                name=${ifDefined(this.name)}
                                maxlength=${ifDefined(this.maxLength || undefined)}
                                aria-label="${this.label}"
@@ -110,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 `
@@ -126,6 +132,32 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             </div>
         `;
     }
+    resolveInputType() {
+        var _a;
+        if (this.isPasswordField()) {
+            return this.hidePassword ? "password" : "text";
+        }
+        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"
@@ -135,7 +167,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         `;
     }
     renderIcon() {
-        if (this.password) {
+        if (this.isPasswordField()) {
             return this.renderPasswordIcon();
         }
         return this.icon ? html `
@@ -147,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;
@@ -156,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];
@@ -178,6 +218,40 @@ 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;
+        this.clearWatchAutofill();
+        if (((_a = this.autocomplete) !== null && _a !== void 0 ? _a : "off") !== "off") {
+            this.watchAutofillInterval = setInterval(() => {
+                var _a, _b, _c;
+                if (((_a = this.input) === null || _a === void 0 ? void 0 : _a.matches(":autofill")) && this.dispatchedValue !== ((_b = this.input) === null || _b === void 0 ? void 0 : _b.value)) {
+                    this.setValue((_c = this.input) === null || _c === void 0 ? void 0 : _c.value, true);
+                }
+            }, 200);
+        }
+    }
+    clearWatchAutofill() {
+        if (this.watchAutofillInterval) {
+            clearInterval(this.watchAutofillInterval);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupWatchAutofill();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.clearWatchAutofill();
     }
     setValue(newValue, fireChangeEvent = false) {
         if (this.value !== newValue) {
@@ -237,15 +311,21 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
     togglePasswordVisibility() {
         this.hidePassword = !this.hidePassword;
     }
+    isPasswordField() {
+        return this.password || this.type === "password";
+    }
     setSuggestionPosition() {
         this.suggestionsContainer.style.width = this.mainPanel.getBoundingClientRect().width + "px";
         const fallbackPlacements = ["bottom", "top"];
-        computeFlipOffsetPosition(this.mainPanel, this.suggestionsContainer, "bottom", fallbackPlacements, "fixed", 0)
+        computeFlipOffsetPosition(this.mainPanel, this.suggestionsContainer, "bottom", fallbackPlacements, "fixed", FtTextFieldCssVariables.suggestSize.name, 0)
             .then(({ x, y }) => {
             this.suggestionsContainer.style.left = `${x}px`;
             this.suggestionsContainer.style.top = `${y}px`;
         });
     }
+    suggestionsShouldBeDisplayed() {
+        return !this.hideSuggestions && (this.visibleSuggestions.length || this.providedSuggestions.length);
+    }
 }
 FtTextField.elementDefinitions = {
     "ft-input-label": FtInputLabel,
@@ -320,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);
@@ -332,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);
@@ -344,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 };