@fluid-topics/ft-text-field 0.2.2 → 0.2.6

package/build/ft-text-field.js

@@ -11,6 +11,7 @@ import { designSystemVariables, FtCssVariable, FtLitElement, setVariable } from
 import { FtTypography, FtTypographyBody1, FtTypographyBody1CssVariables } from "@fluid-topics/ft-typography";
 import { FtInputLabel, FtInputLabelCssVariables } from "@fluid-topics/ft-input-label";
 import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
+import { FtIcon } from "@fluid-topics/ft-icon";
 export const FtTextFieldCssVariables = {
     fontSize: FtCssVariable.create("--ft-text-field-font-size", "SIZE", "14px"),
     labelSize: FtCssVariable.create("--ft-text-field-label-size", "SIZE", "11px"),
@@ -21,6 +22,9 @@ export const FtTextFieldCssVariables = {
     colorOnSurface: FtCssVariable.external(designSystemVariables.colorOnSurface, "Design system"),
     colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
     borderRadiusS: FtCssVariable.external(designSystemVariables.borderRadiusS, "Design system"),
+    colorError: FtCssVariable.external(designSystemVariables.colorError, "Design system"),
+    prefixColor: FtCssVariable.extend("--ft-text-field-prefix-color", designSystemVariables.colorOnSurfaceMedium),
+    iconColor: FtCssVariable.extend("--ft-text-field-icon-color", designSystemVariables.colorOnSurfaceMedium),
 };
 export class FtTextField extends FtLitElement {
     constructor() {
@@ -30,9 +34,16 @@ export class FtTextField extends FtLitElement {
         this.helper = "";
         this.outlined = false;
         this.disabled = false;
-        this.dataList = [];
+        this.error = false;
+        this.prefix = "";
+        this.icon = "";
+        this.iconVariant = "";
         this.focused = false;
     }
+    focus() {
+        var _a;
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     render() {
         const classes = {
             "ft-text-field": true,
@@ -40,7 +51,10 @@ export class FtTextField extends FtLitElement {
             "ft-text-field--outlined": this.outlined,
             "ft-text-field--disabled": this.disabled,
             "ft-text-field--has-value": !!this.value,
-            "ft-text-field--no-label": !this.label
+            "ft-text-field--no-label": !this.label,
+            "ft-text-field--in-error": this.error,
+            "ft-text-field--with-prefix": !!this.prefix,
+            "ft-text-field--raised-label": this.focused || this.value != "",
         };
         return html `
             <div class="${classMap(classes)}">
@@ -49,28 +63,28 @@ export class FtTextField extends FtLitElement {
                                     ?disabled=${this.disabled}
                                     ?outlined=${this.outlined}
                                     ?raised=${this.focused || this.value != ""}
+                                    ?error=${this.error}
                     ></ft-input-label>
                     <div class="ft-text-field--input-panel"
                          aria-label="${this.label}">
                         ${this.outlined ? null : html `
                             <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
                         `}
-                        <input type="text"
-                               class="ft-typography--body1 ft-text-field--input"
-                               ?disabled=${this.disabled}
-                               .value=${this.value}
-                               @change=${this.updateValueFromInputField}
-                               @keyup=${this.liveUpdateValueFromInputField}
-                               @focus=${() => this.focused = true}
-                               @focusout=${() => this.focused = false}
-                               list="datalist"
-                        />
-
-                        <datalist id="datalist">
-                            ${this.dataList.map(optionValue => html `
-                                <option value="${optionValue}"></option>`)}
-                        </datalist>
-
+                        <div class="ft-text-field--input-wrapper">
+                            <ft-typography class="ft-text-field--prefix" vaiant="body1">${this.prefix}</ft-typography>
+                            <input type="text"
+                                   class="ft-typography--body1 ft-text-field--input"
+                                   ?disabled=${this.disabled}
+                                   .value=${this.value}
+                                   @change=${this.updateValueFromInputField}
+                                   @keyup=${this.liveUpdateValueFromInputField}
+                                   @focus=${() => this.focused = true}
+                                   @focusout=${() => this.focused = false}
+                            />
+                        </div>
+                        ${this.icon ? html `
+                            <ft-icon class="ft-text-field--icon" variant="${this.iconVariant}">${this.icon}
+                            </ft-icon>` : undefined}
                     </div>
                 </div>
                 ${this.helper ? html `
@@ -99,6 +113,7 @@ FtTextField.elementDefinitions = {
     "ft-input-label": FtInputLabel,
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
 };
 // language=CSS
 FtTextField.styles = [
@@ -133,7 +148,6 @@ FtTextField.styles = [
                 display: flex;
                 align-items: center;
                 overflow: hidden;
-                gap: 8px;
             }
 
             .ft-text-field--input-panel ft-ripple {
@@ -141,22 +155,51 @@ FtTextField.styles = [
                 ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
             }
 
-            .ft-text-field--input {
-                display: block;
+            .ft-text-field--input-wrapper {
                 flex-grow: 1;
                 flex-shrink: 1;
-                min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
+
+                display: flex;
+                align-items: center;
 
                 ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
                 ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextFieldCssVariables.fontSize)};
-                color: ${FtTextFieldCssVariables.colorOnSurface};
 
                 padding: 0 ${FtTextFieldCssVariables.horizontalSpacing};
+            }
 
+            .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input-wrapper {
+                align-items: flex-end;
+                 padding: 0 ${FtTextFieldCssVariables.horizontalSpacing} ${FtTextFieldCssVariables.verticalSpacing} ${FtTextFieldCssVariables.horizontalSpacing};
+            }
+
+            .ft-text-field--prefix {
+                display: none;
+                color: ${FtTextFieldCssVariables.prefixColor}
+            }
+
+            .ft-text-field--with-prefix.ft-text-field--raised-label .ft-text-field--prefix {
+                display: block;
+            }
+
+            .ft-text-field--input {
+                display: block;
+                position: relative;
+                flex-grow: 1;
+                flex-shrink: 1;
+                min-width: 0; /* flex sets this to auto an prevents input from shrinking properly */
+
+                color: ${FtTextFieldCssVariables.colorOnSurface};
+                padding: calc(2 * ${FtTextFieldCssVariables.verticalSpacing}) 0;
                 border: none;
                 background: none;
             }
 
+            .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input {
+                padding-bottom: 0;
+                padding-top: calc(${FtTextFieldCssVariables.labelSize} + 2 * ${FtTextFieldCssVariables.verticalSpacing});
+            }
+
             .ft-text-field--input::-webkit-calendar-picker-indicator,
             .ft-text-field--input::-webkit-list-button {
                 display: none !important;
@@ -179,12 +222,6 @@ FtTextField.styles = [
                 border-radius: ${FtTextFieldCssVariables.borderRadiusS} ${FtTextFieldCssVariables.borderRadiusS} 0 0;
             }
 
-            .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input {
-                align-self: stretch;
-                padding-bottom: ${FtTextFieldCssVariables.verticalSpacing};
-                padding-top: calc(${FtTextFieldCssVariables.labelSize} + 2 * ${FtTextFieldCssVariables.verticalSpacing});
-            }
-
             .ft-text-field--outlined .ft-text-field--input-panel {
                 border-radius: ${FtTextFieldCssVariables.borderRadiusS};
             }
@@ -193,6 +230,17 @@ FtTextField.styles = [
                 padding: 0 12px 0 ${FtTextFieldCssVariables.horizontalSpacing};
                 color: ${FtTextFieldCssVariables.helperColor};
             }
+
+            .ft-text-field--in-error .ft-text-field--input,
+            .ft-text-field--in-error .ft-text-field--helper-text,
+            .ft-text-field--in-error .ft-text-field--prefix {
+                color: ${FtTextFieldCssVariables.colorError};
+            }
+
+            .ft-text-field--icon {
+                padding-right: ${FtTextFieldCssVariables.horizontalSpacing};
+                color: ${FtTextFieldCssVariables.iconColor};
+            }
         `
 ];
 __decorate([
@@ -210,12 +258,21 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtTextField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtTextField.prototype, "error", void 0);
 __decorate([
     query(".ft-text-field--input")
 ], FtTextField.prototype, "input", void 0);
 __decorate([
-    property({ attribute: false })
-], FtTextField.prototype, "dataList", void 0);
+    property({ type: String })
+], FtTextField.prototype, "prefix", void 0);
+__decorate([
+    property({ type: String })
+], FtTextField.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], FtTextField.prototype, "iconVariant", void 0);
 __decorate([
     state()
 ], FtTextField.prototype, "focused", void 0);