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

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

@@ -41,11 +41,17 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     focus(): void;
     constructor();
     protected render(): import("lit").TemplateResult<1>;
+    private resolveInputType;
     private renderPasswordIcon;
     private renderIcon;
     protected update(props: PropertyValues): void;
     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 +60,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private onFocus;
     private onMainPanelBlur;
     private togglePasswordVisibility;
+    private isPasswordField;
     private setSuggestionPosition;
 }
 export {};

package/build/ft-text-field.js

@@ -13,7 +13,7 @@ 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") {
     /*
@@ -59,7 +59,6 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         this.visibleSuggestions = [];
     }
     render() {
-        var _a;
         const classes = {
             "ft-text-field": true,
             "ft-text-field--filled": !this.outlined,
@@ -73,7 +72,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             "ft-text-field--hide-suggestions": this.hideSuggestions || this.visibleSuggestions.length == 0,
             "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()
         };
         return html `
             <div class="${classMap(classes)}">
@@ -94,7 +93,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}"
@@ -126,6 +125,13 @@ 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";
+    }
     renderPasswordIcon() {
         return html `
             <ft-icon class="ft-text-field--icon"
@@ -135,7 +141,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         `;
     }
     renderIcon() {
-        if (this.password) {
+        if (this.isPasswordField()) {
             return this.renderPasswordIcon();
         }
         return this.icon ? html `
@@ -178,6 +184,34 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         if (props.has("focused") && !this.hideSuggestions && this.visibleSuggestions.length > 0) {
             this.setSuggestionPosition();
         }
+        if (props.has("autocomplete")) {
+            this.setupWatchAutofill();
+        }
+    }
+    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,10 +271,13 @@ 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`;