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

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

@@ -4,11 +4,11 @@ import { FtTypographyBody1CssVariables } from "@fluid-topics/ft-typography/build
 import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label/build/ft-input-label.css";
 import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
 export const FtTextAreaCssVariables = {
-    fontSize: FtCssVariableFactory.create("--ft-text-area-font-size", "SIZE", "14px"),
-    labelSize: FtCssVariableFactory.create("--ft-text-area-label-size", "SIZE", "11px"),
-    verticalSpacing: FtCssVariableFactory.create("--ft-text-area-vertical-spacing", "SIZE", "4px"),
-    horizontalSpacing: FtCssVariableFactory.create("--ft-text-area-horizontal-spacing", "SIZE", "16px"),
-    helperColor: FtCssVariableFactory.extend("--ft-text-area-helper-color", designSystemVariables.colorOnSurfaceMedium),
+    fontSize: FtCssVariableFactory.create("--ft-text-area-font-size", "", "SIZE", "14px"),
+    labelSize: FtCssVariableFactory.create("--ft-text-area-label-size", "", "SIZE", "11px"),
+    verticalSpacing: FtCssVariableFactory.create("--ft-text-area-vertical-spacing", "", "SIZE", "4px"),
+    horizontalSpacing: FtCssVariableFactory.create("--ft-text-area-horizontal-spacing", "", "SIZE", "16px"),
+    helperColor: FtCssVariableFactory.extend("--ft-text-area-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"),

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

@@ -1,7 +1,8 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTextAreaProperties } from "./ft-text-area.properties";
-export declare class FtTextArea extends FtLitElement implements FtTextAreaProperties {
+declare const FtTextArea_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
+export declare class FtTextArea extends FtTextArea_base implements FtTextAreaProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
     label: string;
@@ -21,3 +22,4 @@ export declare class FtTextArea extends FtLitElement implements FtTextAreaProper
     private liveUpdateValueFromInputField;
     private onResize;
 }
+export {};

package/build/ft-text-area.js

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.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 { FtResizer } from "@fluid-topics/ft-resizer";
 import { FtInputLabel } from "@fluid-topics/ft-input-label";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTextAreaCssVariables, styles } from "./ft-text-area.css";
-class FtTextArea extends FtLitElement {
+class FtTextArea extends toFtFormComponent(FtLitElement, "textbox") {
     constructor() {
         super(...arguments);
         this.label = "";
@@ -81,6 +81,7 @@ class FtTextArea extends FtLitElement {
     }
     setValue(value, sendEvents = false) {
         this.value = value;
+        this.setFormValue(value);
         if (sendEvents) {
             this.dispatchEvent(new CustomEvent("live-change", { detail: this.value }));
             this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
@@ -101,6 +102,7 @@ class FtTextArea extends FtLitElement {
     liveUpdateValueFromInputField() {
         var _a;
         this.value = ((_a = this.textarea) === null || _a === void 0 ? void 0 : _a.value) || "";
+        this.setFormValue(this.value);
         this.dispatchEvent(new CustomEvent("live-change", { detail: this.value }));
     }
     onResize(event) {