@fluid-topics/ft-text-field 1.2.4 → 1.2.6

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

@@ -6,6 +6,7 @@ export declare class SuggestionSelectedEvent extends CustomEvent<string> {
 export declare class FtTextFieldSuggestion extends FtLitElement implements FtTextFieldSuggestionProperties {
     static elementDefinitions: ElementDefinitionsMap;
     value?: string;
+    helper?: string;
     private container?;
     private assignedNodes;
     static styles: import("lit").CSSResult;

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

@@ -5,12 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { property, query, queryAssignedNodes } from "lit/decorators.js";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
 import { suggestionStyles } from "./ft-text-field-suggestion.styles";
 import { FtIcon } from "@fluid-topics/ft-icon";
+import { classMap } from "lit/directives/class-map.js";
 export class SuggestionSelectedEvent extends CustomEvent {
     constructor(value) {
         super("suggestion-selected", { detail: value, bubbles: true, composed: true });
@@ -18,12 +19,20 @@ export class SuggestionSelectedEvent extends CustomEvent {
 }
 class FtTextFieldSuggestion extends FtLitElement {
     render() {
+        const classes = {
+            "ft-text-field-suggestion": true,
+            "ft-text-field-suggestion--with-helper": !!this.helper
+        };
         return html `
-            <div class="ft-text-field-suggestion"
+            <div class=${classMap(classes)}
                  tabindex="-1"
                  @keydown=${this.onKeyDown}
                  @click=${this.confirmSuggestion}>
                 <ft-ripple></ft-ripple>
+                ${this.helper ? html `
+                    <ft-typography class="ft-text-field-suggestion--helper-text" variant="caption">
+                        ${this.helper}
+                    </ft-typography>` : nothing}
                 <ft-typography part="label"
                                variant="body1"
                                class="ft-text-field-suggestion--label">
@@ -66,6 +75,9 @@ FtTextFieldSuggestion.styles = suggestionStyles;
 __decorate([
     property()
 ], FtTextFieldSuggestion.prototype, "value", void 0);
+__decorate([
+    property()
+], FtTextFieldSuggestion.prototype, "helper", void 0);
 __decorate([
     query(".ft-text-field-suggestion")
 ], FtTextFieldSuggestion.prototype, "container", void 0);

package/build/ft-text-field-suggestion.styles.js

@@ -1,4 +1,5 @@
 import { css } from "lit";
+import { FtTextFieldCssVariables } from "./ft-text-field.styles";
 // language=CSS
 export const suggestionStyles = css `
     .ft-text-field-suggestion {
@@ -21,7 +22,18 @@ export const suggestionStyles = css `
         flex-grow: 1;
         flex-shrink: 1;
     }
-    
+
+    .ft-text-field-suggestion--with-helper {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+    }
+
+    .ft-text-field-suggestion--helper-text {
+        color: ${FtTextFieldCssVariables.helperColor};
+    }
+
     slot {
         pointer-events: none;
     }

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

@@ -1,7 +1,7 @@
 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";
+import { FtTextFieldSuggestion } from "./ft-text-field-suggestion";
 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;
@@ -13,6 +13,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private setInternalValue;
     dispatchedValue: string;
     helper?: string;
+    suggestionsHelper?: string;
     outlined: boolean;
     disabled: boolean;
     error: boolean;
@@ -33,9 +34,11 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     visibleSuggestions: FtTextFieldSuggestion[];
     mainPanel?: HTMLElement;
     input?: HTMLInputElement;
+    newValueSuggestion?: FtTextFieldSuggestion;
     suggestionsContainer?: HTMLElement;
     suggestions: FtTextFieldSuggestion[];
     focus(): void;
+    constructor();
     protected render(): import("lit").TemplateResult<1>;
     private renderPasswordIcon;
     private renderIcon;

package/build/ft-text-field.js

@@ -14,26 +14,9 @@ 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 { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
 class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
-    constructor() {
-        super(...arguments);
-        this._value = "";
-        this.dispatchedValue = "";
-        this.outlined = false;
-        this.disabled = false;
-        this.error = false;
-        this.fixedMenuPosition = false;
-        this.prefix = null;
-        this.passwordHiddenIcon = FtIcons.EYE_SLASH;
-        this.passwordRevealedIcon = FtIcons.EYE;
-        this.filterSuggestions = false;
-        this.password = false;
-        this.focused = false;
-        this.hidePassword = true;
-        this.hideSuggestions = false;
-        this.visibleSuggestions = [];
-    }
     /*
      * We prevent lit from creating setter and getter to differentiate
      * when the value change comes from inside or outside the component
@@ -58,6 +41,24 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         var _a;
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    constructor() {
+        super();
+        this._value = "";
+        this.dispatchedValue = "";
+        this.outlined = false;
+        this.disabled = false;
+        this.error = false;
+        this.fixedMenuPosition = false;
+        this.prefix = null;
+        this.passwordHiddenIcon = FtIcons.EYE_SLASH;
+        this.passwordRevealedIcon = FtIcons.EYE;
+        this.filterSuggestions = false;
+        this.password = false;
+        this.focused = false;
+        this.hidePassword = true;
+        this.hideSuggestions = false;
+        this.visibleSuggestions = [];
+    }
     render() {
         var _a;
         const classes = {
@@ -70,7 +71,7 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
             "ft-text-field--in-error": this.error,
             "ft-text-field--fixed": this.fixedMenuPosition,
             "ft-text-field--with-prefix": !!this.prefix,
-            "ft-text-field--hide-suggestions": this.visibleSuggestions.length === 0 || this.hideSuggestions,
+            "ft-text-field--hide-suggestions": this.hideSuggestions,
             "ft-text-field--raised-label": this.focused || this.value != "",
             "ft-text-field--with-icon": !!this.icon,
             "ft-text-field--with-password": this.password
@@ -110,6 +111,11 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
                     <div class="ft-text-field--suggestions"
                          @suggestion-selected=${this.onSuggestionSelected}>
                         <slot @slotchange=${() => this.filterSuggestionsIfNeeded()}></slot>
+                        ${this.filterSuggestions && this.value ? html `
+                            <ft-text-field-suggestion class="ft-text-field-suggestion--new-value" helper="${this.suggestionsHelper}">
+                                ${this.value}
+                            </ft-text-field-suggestion>
+                        ` : nothing}
                     </div>
                 </div>
                 ${this.helper ? html `
@@ -159,6 +165,9 @@ class FtTextField extends toFtFormComponent(FtLitElement, "textbox") {
         else {
             this.visibleSuggestions = this.suggestions;
         }
+        if (this.newValueSuggestion) {
+            this.visibleSuggestions = [...this.visibleSuggestions, this.newValueSuggestion];
+        }
     }
     contentAvailableCallback(props) {
         super.contentAvailableCallback(props);
@@ -235,6 +244,7 @@ FtTextField.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-icon": FtIcon,
+    "ft-text-field-suggestion": FtTextFieldSuggestion
 };
 // language=CSS
 FtTextField.styles = [
@@ -254,6 +264,9 @@ __decorate([
 __decorate([
     property()
 ], FtTextField.prototype, "helper", void 0);
+__decorate([
+    property()
+], FtTextField.prototype, "suggestionsHelper", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtTextField.prototype, "outlined", void 0);
@@ -314,6 +327,9 @@ __decorate([
 __decorate([
     query(".ft-text-field--input")
 ], FtTextField.prototype, "input", void 0);
+__decorate([
+    query(".ft-text-field-suggestion--new-value")
+], FtTextField.prototype, "newValueSuggestion", void 0);
 __decorate([
     query(".ft-text-field--suggestions")
 ], FtTextField.prototype, "suggestionsContainer", void 0);