@fluid-topics/ft-text-field 1.0.58 → 1.0.60

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

@@ -5,23 +5,23 @@ import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label/build/ft-
 import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
 import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
 export const FtTextFieldCssVariables = {
-    fontSize: FtCssVariableFactory.create("--ft-text-field-font-size", "SIZE", "14px"),
-    labelSize: FtCssVariableFactory.create("--ft-text-field-label-size", "SIZE", "11px"),
-    verticalSpacing: FtCssVariableFactory.create("--ft-text-field-vertical-spacing", "SIZE", "4px"),
-    horizontalSpacing: FtCssVariableFactory.create("--ft-text-field-horizontal-spacing", "SIZE", "16px"),
-    helperColor: FtCssVariableFactory.extend("--ft-text-field-helper-color", designSystemVariables.colorOnSurfaceMedium),
+    fontSize: FtCssVariableFactory.create("--ft-text-field-font-size", "", "SIZE", "14px"),
+    labelSize: FtCssVariableFactory.create("--ft-text-field-label-size", "", "SIZE", "11px"),
+    verticalSpacing: FtCssVariableFactory.create("--ft-text-field-vertical-spacing", "", "SIZE", "4px"),
+    horizontalSpacing: FtCssVariableFactory.create("--ft-text-field-horizontal-spacing", "", "SIZE", "16px"),
+    helperColor: FtCssVariableFactory.extend("--ft-text-field-helper-color", "", designSystemVariables.colorOnSurfaceMedium),
     colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
     colorOnSurface: FtCssVariableFactory.external(designSystemVariables.colorOnSurface, "Design system"),
     colorOnSurfaceDisabled: FtCssVariableFactory.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
     borderRadiusS: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design system"),
     colorError: FtCssVariableFactory.external(designSystemVariables.colorError, "Design system"),
-    prefixColor: FtCssVariableFactory.extend("--ft-text-field-prefix-color", designSystemVariables.colorOnSurfaceMedium),
-    iconColor: FtCssVariableFactory.extend("--ft-text-field-icon-color", designSystemVariables.colorOnSurfaceMedium),
-    floatingZIndex: FtCssVariableFactory.create("--ft-text-field-floating-components-z-index", "NUMBER", "3"),
+    prefixColor: FtCssVariableFactory.extend("--ft-text-field-prefix-color", "", designSystemVariables.colorOnSurfaceMedium),
+    iconColor: FtCssVariableFactory.extend("--ft-text-field-icon-color", "", designSystemVariables.colorOnSurfaceMedium),
+    floatingZIndex: FtCssVariableFactory.create("--ft-text-field-floating-components-z-index", "", "NUMBER", "3"),
     colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
     colorOutline: FtCssVariableFactory.external(designSystemVariables.colorOutline, "Design system"),
     elevation02: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
-    suggestSize: FtCssVariableFactory.create("--ft-text-field-suggest-size", "SIZE", "300px"),
+    suggestSize: FtCssVariableFactory.create("--ft-text-field-suggest-size", "", "SIZE", "300px"),
 };
 // language=CSS
 export const styles = css `

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

@@ -2,7 +2,8 @@ import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTextFieldProperties } from "./ft-text-field.properties";
 import type { FtTextFieldSuggestion } from "./ft-text-field-suggestion";
-export declare class FtTextField extends FtLitElement implements FtTextFieldProperties {
+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;
     static styles: import("lit").CSSResult[];
     label?: string;
@@ -48,3 +49,4 @@ export declare class FtTextField extends FtLitElement implements FtTextFieldProp
     private onMainPanelBlur;
     private togglePasswordVisibility;
 }
+export {};

package/build/ft-text-field.js

@@ -8,13 +8,13 @@ import { html, nothing } from "lit";
 import { property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
 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.css";
-class FtTextField extends FtLitElement {
+class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
     constructor() {
         super(...arguments);
         this._value = "";
@@ -50,6 +50,7 @@ class FtTextField extends FtLitElement {
     setInternalValue(value) {
         const oldValue = this._value;
         this._value = value || "";
+        this.setFormValue(this._value);
         this.requestUpdate("value", oldValue);
     }
     focus() {
@@ -86,10 +87,10 @@ class FtTextField extends FtLitElement {
                             <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
                         `}
                         ${this.prefix ? html `
-                                    <ft-typography class="ft-text-field--prefix" vaiant="body1">
-                                        ${this.prefix}
-                                    </ft-typography>
-                                ` : nothing}
+                                <ft-typography class="ft-text-field--prefix" vaiant="body1">
+                                    ${this.prefix}
+                                </ft-typography>
+                            ` : nothing}
                         <input type=${(this.password && this.hidePassword) ? "password" : "text"}
                                maxlength=${ifDefined(this.maxLength || undefined)}
                                aria-label="${this.label}"