@fluid-topics/ft-text-field 1.3.54 → 1.3.56

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

@@ -32,6 +32,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     autocomplete?: string;
     suggestionsProvider?: (query: string) => FtTextFieldSuggestionDefinition[] | Promise<FtTextFieldSuggestionDefinition[]>;
     focused: boolean;
+    inputValid: boolean;
     hidePassword: boolean;
     hideSuggestions: boolean;
     visibleSuggestions: FtTextFieldSuggestion[];

package/build/ft-text-field.js

@@ -10,12 +10,13 @@ import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { computeOffsetAutoPosition, FtLitElement, noTextInputDefaultClearButton, toFtFormComponent } from "@fluid-topics/ft-wc-utils";
-import { FtTypography, FtTypographyBody1 } from "@fluid-topics/ft-typography";
+import { FtTypography, FtTypographyBody1, FtTypographyVariants } 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 { FtTextFieldSuggestion } from "./ft-text-field-suggestion";
+import { FtTextFieldChangeEvent, FtTextFieldInvalidEvent, FtTextFieldLiveChangeEvent } from "./models";
 class FtTextField extends toFtFormComponent(FtLitElement) {
     constructor() {
         super(...arguments);
@@ -31,6 +32,7 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
         this.filterSuggestions = false;
         this.password = false;
         this.focused = false;
+        this.inputValid = true;
         this.hidePassword = true;
         this.hideSuggestions = false;
         this.visibleSuggestions = [];
@@ -65,6 +67,7 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
+        var _a;
         const classes = {
             "ft-text-field": true,
             "ft-text-field--filled": !this.outlined,
@@ -72,7 +75,7 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
             "ft-text-field--disabled": this.disabled,
             "ft-text-field--has-value": !!this.value,
             "ft-text-field--with-label": !!this.label,
-            "ft-text-field--in-error": this.error,
+            "ft-text-field--in-error": !this.inputValid || this.error,
             "ft-text-field--fixed": this.fixedMenuPosition,
             "ft-text-field--with-prefix": !!this.prefix,
             "ft-text-field--hide-suggestions": !this.suggestionsShouldBeDisplayed(),
@@ -83,6 +86,7 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
         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;
+        const helper = this.inputValid ? this.helper : (_a = this.input) === null || _a === void 0 ? void 0 : _a.validationMessage;
         return html `
             <div class="${classMap(classes)}">
                 <div class="ft-text-field--main-panel"
@@ -92,7 +96,7 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
                                     ?disabled=${this.disabled}
                                     ?outlined=${this.outlined}
                                     ?raised=${this.focused || this.value != ""}
-                                    ?error=${this.error}></ft-input-label>
+                                    ?error=${!this.inputValid || this.error}></ft-input-label>
                     <div class="ft-text-field--input-panel">
                         ${this.outlined ? nothing : html `
                             <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
@@ -113,8 +117,9 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
                                .value=${this.value}
                                @click=${this.handleClick}
                                @keyup=${this.handleInput}
-                               @focus=${this.onFocus}/>
-                        ${(this.renderIcon())}
+                               @focus=${this.onFocus}
+                        />
+                        ${this.renderIcon()}
                     </div>
                     <div class="ft-text-field--suggestions"
                          @suggestion-selected=${this.onSuggestionSelected}>
@@ -128,9 +133,9 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
             : nothing}
                     </div>
                 </div>
-                ${this.helper ? html `
-                    <ft-typography class="ft-text-field--helper-text" variant="caption">
-                        ${this.helper}
+                ${helper ? html `
+                    <ft-typography class="ft-text-field--helper-text" variant="${FtTypographyVariants.caption}">
+                        ${helper}
                     </ft-typography>
                 ` : nothing}
             </div>
@@ -153,7 +158,8 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
                                                `
                 : nothing}
                             ${suggestion.label}
-                        </ft-text-field-suggestion>`)}
+                        </ft-text-field-suggestion>
+                    `)}
             `;
         }
         else {
@@ -263,13 +269,21 @@ class FtTextField extends toFtFormComponent(FtLitElement) {
         this.clearWatchAutofill();
     }
     setValue(newValue, fireChangeEvent = false) {
+        var _a, _b;
         if (this.value !== newValue) {
+            this.inputValid = true;
             this.setInternalValue(newValue);
-            this.dispatchEvent(new CustomEvent("live-change", { detail: newValue }));
+            this.dispatchEvent(new FtTextFieldLiveChangeEvent(newValue));
         }
         if (fireChangeEvent && this.dispatchedValue !== newValue) {
-            this.dispatchedValue = newValue;
-            this.dispatchEvent(new CustomEvent("change", { detail: newValue }));
+            this.inputValid = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity()) !== null && _b !== void 0 ? _b : true;
+            if (this.inputValid) {
+                this.dispatchedValue = newValue;
+                this.dispatchEvent(new FtTextFieldChangeEvent(newValue));
+            }
+            else {
+                this.dispatchEvent(new FtTextFieldInvalidEvent(this.input.validationMessage));
+            }
         }
     }
     handleInput(event) {
@@ -415,6 +429,9 @@ __decorate([
 __decorate([
     state()
 ], FtTextField.prototype, "focused", void 0);
+__decorate([
+    state()
+], FtTextField.prototype, "inputValid", void 0);
 __decorate([
     state()
 ], FtTextField.prototype, "hidePassword", void 0);