@fluid-topics/ft-text-field 0.3.37 → 0.3.39

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

@@ -0,0 +1,2 @@
+export declare const suggestionStyles: import("lit").CSSResult;
+//# sourceMappingURL=ft-text-field-suggestion.css.d.ts.map

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

@@ -0,0 +1,29 @@
+import { css } from "lit";
+// language=CSS
+export const suggestionStyles = css `
+    .ft-text-field-suggestion {
+        position: relative;
+        padding: 8px 16px;
+        cursor: pointer;
+        min-height: 44px;
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    .ft-text-field-suggestion,
+    .ft-text-field-suggestion--label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .ft-text-field-suggestion--label {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+    
+    slot {
+        pointer-events: none;
+    }
+`;
+//# sourceMappingURL=ft-text-field-suggestion.css.js.map

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

@@ -0,0 +1,20 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtTextFieldSuggestionProperties } from "./ft-text-field-suggestion.properties";
+export declare class SuggestionSelectedEvent extends CustomEvent<string> {
+    constructor(value: string);
+}
+export declare class FtTextFieldSuggestion extends FtLitElement implements FtTextFieldSuggestionProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    value?: string;
+    private container?;
+    private assignedNodes;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    focus(options?: FocusOptions): void;
+    click(): void;
+    private confirmSuggestion;
+    getValue(): string;
+    get textContent(): string;
+    private onKeyDown;
+}
+//# sourceMappingURL=ft-text-field-suggestion.d.ts.map

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

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { html } 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.css";
+import { FtIcon } from "@fluid-topics/ft-icon";
+export class SuggestionSelectedEvent extends CustomEvent {
+    constructor(value) {
+        super("suggestion-selected", { detail: value, bubbles: true, composed: true });
+    }
+}
+export class FtTextFieldSuggestion extends FtLitElement {
+    render() {
+        return html `
+            <div class="ft-text-field-suggestion"
+                 tabindex="-1"
+                 @keydown=${this.onKeyDown}
+                 @click=${this.confirmSuggestion}>
+                <ft-ripple></ft-ripple>
+                <ft-typography part="label"
+                               variant="body1"
+                               class="ft-text-field-suggestion--label">
+                    <slot></slot>
+                </ft-typography>
+            </div>
+        `;
+    }
+    focus(options) {
+        var _a;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    click() {
+        var _a;
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    confirmSuggestion() {
+        this.dispatchEvent(new SuggestionSelectedEvent(this.getValue()));
+    }
+    getValue() {
+        return this.value || this.textContent;
+    }
+    get textContent() {
+        return this.assignedNodes.map(n => n.textContent).join("").trim();
+    }
+    onKeyDown(event) {
+        if (["Enter", " "].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.confirmSuggestion();
+        }
+    }
+}
+FtTextFieldSuggestion.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+    "ft-icon": FtIcon,
+};
+FtTextFieldSuggestion.styles = suggestionStyles;
+__decorate([
+    property()
+], FtTextFieldSuggestion.prototype, "value", void 0);
+__decorate([
+    query(".ft-text-field-suggestion")
+], FtTextFieldSuggestion.prototype, "container", void 0);
+__decorate([
+    queryAssignedNodes()
+], FtTextFieldSuggestion.prototype, "assignedNodes", void 0);
+//# sourceMappingURL=ft-text-field-suggestion.js.map

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

@@ -0,0 +1,4 @@
+export interface FtTextFieldSuggestionProperties {
+    value?: string;
+}
+//# sourceMappingURL=ft-text-field-suggestion.properties.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-text-field-suggestion.properties.js.map

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

@@ -11,6 +11,11 @@ export declare const FtTextFieldCssVariables: {
     colorError: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     prefixColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     iconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    floatingZIndex: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOutline: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    suggestSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;
 //# sourceMappingURL=ft-text-field.css.d.ts.map

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

@@ -16,6 +16,11 @@ export const FtTextFieldCssVariables = {
     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"),
+    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"),
 };
 // language=CSS
 export const styles = css `
@@ -27,6 +32,7 @@ export const styles = css `
         display: flex;
         flex-direction: column;
         align-items: stretch;
+        position: relative;
     }
 
     ft-input-label {
@@ -48,6 +54,10 @@ export const styles = css `
         display: flex;
         align-items: center;
         overflow: hidden;
+        padding: 0 ${FtTextFieldCssVariables.horizontalSpacing};
+
+        ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
+        ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextFieldCssVariables.fontSize)};
     }
 
     .ft-text-field--input-panel ft-ripple {
@@ -55,31 +65,22 @@ export const styles = css `
         ${setVariable(FtRippleCssVariables.opacityContentOnSurfacePressed, "0.04")};
     }
 
-    .ft-text-field--input-wrapper {
-        flex-grow: 1;
-        flex-shrink: 1;
-
-        display: flex;
-        align-items: center;
-
-        ${setVariable(FtTypographyBody1CssVariables.fontSize, FtTextFieldCssVariables.fontSize)};
-        ${setVariable(FtTypographyBody1CssVariables.lineHeight, FtTextFieldCssVariables.fontSize)};
-
-        padding: 0 ${FtTextFieldCssVariables.horizontalSpacing};
-    }
-
-    .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input-wrapper {
+    .ft-text-field--filled.ft-text-field--with-label .ft-text-field--input-panel {
         align-items: flex-end;
         padding: 0 ${FtTextFieldCssVariables.horizontalSpacing} ${FtTextFieldCssVariables.verticalSpacing} ${FtTextFieldCssVariables.horizontalSpacing};
     }
 
     .ft-text-field--prefix {
-        display: none;
-        color: ${FtTextFieldCssVariables.prefixColor}
+        color: ${FtTextFieldCssVariables.prefixColor};
+        margin-right: 2px;
+        flex-shrink: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
-    .ft-text-field--with-prefix.ft-text-field--raised-label .ft-text-field--prefix {
-        display: block;
+    .ft-text-field--with-label:not(.ft-text-field--raised-label) .ft-text-field--prefix {
+        display: none;
     }
 
     .ft-text-field--input {
@@ -95,7 +96,7 @@ export const styles = css `
         background: none;
     }
 
-    .ft-text-field--filled:not(.ft-text-field--no-label) .ft-text-field--input {
+    .ft-text-field--filled.ft-text-field--with-label .ft-text-field--input {
         padding-bottom: 0;
         padding-top: calc(${FtTextFieldCssVariables.labelSize} + 2 * ${FtTextFieldCssVariables.verticalSpacing});
     }
@@ -109,10 +110,6 @@ export const styles = css `
         color: ${FtTextFieldCssVariables.colorOnSurfaceDisabled};
     }
 
-    .ft-text-field:not(.ft-text-field--disabled) .ft-text-field--input-panel {
-        cursor: pointer;
-    }
-
     .ft-text-field:not(.ft-text-field--disabled):focus-within ft-input-label {
         ${setVariable(FtInputLabelCssVariables.borderColor, FtTextFieldCssVariables.colorPrimary)};
         ${setVariable(FtInputLabelCssVariables.textColor, FtTextFieldCssVariables.colorPrimary)};
@@ -138,8 +135,41 @@ export const styles = css `
     }
 
     .ft-text-field--icon {
-        padding-right: ${FtTextFieldCssVariables.horizontalSpacing};
+        align-self: center;
+        margin-left: 8px;
         color: ${FtTextFieldCssVariables.iconColor};
     }
+
+    .ft-text-field--container {
+        position: relative;
+    }
+
+    .ft-text-field--suggestions {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: ${FtTextFieldCssVariables.floatingZIndex};
+        background: ${FtTextFieldCssVariables.colorSurface};
+        border: 1px solid ${FtTextFieldCssVariables.colorOutline};
+        border-radius: 0 0 ${FtTextFieldCssVariables.borderRadiusS} ${FtTextFieldCssVariables.borderRadiusS};
+        box-shadow: ${FtTextFieldCssVariables.elevation02};
+        outline: none;
+        max-height: ${FtTextFieldCssVariables.suggestSize};
+        overflow-y: auto;
+    }
+
+    .ft-text-field--suggestions:not(.ft-text-field--suggestions-on-top) {
+        top: 100%;
+    }
+
+    .ft-text-field--suggestions.ft-text-field--suggestions-on-top {
+        bottom: 100%;
+    }
+
+    .ft-text-field:not(.ft-text-field--hide-suggestions):focus-within .ft-text-field--suggestions {
+        display: flex;
+    }
 `;
 //# sourceMappingURL=ft-text-field.css.js.map

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

@@ -1,24 +1,39 @@
 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 {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
-    label: string;
+    label?: string;
     value: string;
-    helper: string;
+    helper?: string;
     outlined: boolean;
     disabled: boolean;
     error: boolean;
-    private input?;
-    prefix: string;
-    icon: string;
-    iconVariant: string;
-    private focused;
+    prefix: string | null;
+    icon?: string;
+    iconVariant?: string;
+    filterSuggestions: boolean;
+    focused: boolean;
+    suggestionsOnTop: boolean;
+    hideSuggestions: boolean;
+    visibleSuggestions: FtTextFieldSuggestion[];
+    input?: HTMLInputElement;
+    suggestionsContainer?: HTMLElement;
+    suggestions: FtTextFieldSuggestion[];
     focus(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     protected updated(props: PropertyValues): void;
+    private filterSuggestionsIfNeeded;
+    protected contentAvailableCallback(props: PropertyValues): void;
     private updateValueFromInputField;
-    private liveUpdateValueFromInputField;
+    private handleInput;
+    private handleClick;
+    setValue(newValue: string, fireEvent?: boolean): void;
+    private handleKeyboardNavigation;
+    private onSuggestionSelected;
+    private onFocus;
+    private onInputBlur;
 }
 //# sourceMappingURL=ft-text-field.d.ts.map

package/build/ft-text-field.js

@@ -4,8 +4,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { html, nothing } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTypography, FtTypographyBody1 } from "@fluid-topics/ft-typography";
@@ -16,16 +16,16 @@ import { styles } from "./ft-text-field.css";
 export class FtTextField extends FtLitElement {
     constructor() {
         super(...arguments);
-        this.label = "";
         this.value = "";
-        this.helper = "";
         this.outlined = false;
         this.disabled = false;
         this.error = false;
-        this.prefix = "";
-        this.icon = "";
-        this.iconVariant = "";
+        this.prefix = null;
+        this.filterSuggestions = false;
         this.focused = false;
+        this.suggestionsOnTop = false;
+        this.hideSuggestions = false;
+        this.visibleSuggestions = [];
     }
     focus() {
         var _a;
@@ -38,62 +38,136 @@ 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--with-label": !!this.label,
             "ft-text-field--in-error": this.error,
             "ft-text-field--with-prefix": !!this.prefix,
+            "ft-text-field--hide-suggestions": this.visibleSuggestions.length === 0 || this.hideSuggestions,
             "ft-text-field--raised-label": this.focused || this.value != "",
         };
         return html `
             <div class="${classMap(classes)}">
-                <div class="ft-text-field--main-panel">
+                <div class="ft-text-field--main-panel"
+                     @keydown=${this.handleKeyboardNavigation}>
                     <ft-input-label text="${this.label}"
                                     ?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 `
+                                    ?error=${this.error}></ft-input-label>
+                    <div class="ft-text-field--input-panel">
+                        ${this.outlined ? nothing : html `
                             <ft-ripple ?disabled=${this.disabled} activated></ft-ripple>
                         `}
-                        <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>
+                        <ft-typography class="ft-text-field--prefix" vaiant="body1">${this.prefix}</ft-typography>
+                        <input type="text"
+                               aria-label="${this.label}"
+                               class="ft-typography--body1 ft-text-field--input"
+                               ?disabled=${this.disabled}
+                               .value=${this.value}
+                               @click=${this.handleClick}
+                               @change=${this.updateValueFromInputField}
+                               @keyup=${this.handleInput}
+                               @focus=${this.onFocus}
+                               @blur=${this.onInputBlur}/>
                         ${this.icon ? html `
-                            <ft-icon class="ft-text-field--icon" variant="${this.iconVariant}">${this.icon}
-                            </ft-icon>` : undefined}
+                            <ft-icon class="ft-text-field--icon"
+                                     .variant=${this.iconVariant}
+                                     .value=${this.icon}
+                                     @click=${() => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }}></ft-icon>
+                        ` : nothing}
+                    </div>
+                    <div class="ft-text-field--suggestions ${this.suggestionsOnTop ? "ft-text-field--suggestions-on-top" : ""}"
+                         @suggestion-selected=${this.onSuggestionSelected}>
+                        <slot @slotchange=${() => this.filterSuggestionsIfNeeded()}></slot>
                     </div>
                 </div>
                 ${this.helper ? html `
-                    <ft-typography class="ft-text-field--helper-text" variant="caption">${this.helper}
-                    </ft-typography>` : undefined}
+                    <ft-typography class="ft-text-field--helper-text" variant="caption">
+                        ${this.helper}
+                    </ft-typography>
+                ` : nothing}
             </div>
         `;
     }
     updated(props) {
         super.updated(props);
-        if (props.has("value")) {
-            this.dispatchEvent(new CustomEvent("live-change", { detail: this.value }));
+        if (props.has("value") || props.has("filterSuggestions")) {
+            this.filterSuggestionsIfNeeded();
+        }
+    }
+    filterSuggestionsIfNeeded() {
+        if (this.filterSuggestions) {
+            this.suggestions.forEach(s => s.hidden = !s.getValue().toLowerCase().includes(this.value.toLowerCase()));
+            this.visibleSuggestions = this.suggestions.filter(s => !s.hidden);
+        }
+        else {
+            this.visibleSuggestions = this.suggestions;
+        }
+    }
+    contentAvailableCallback(props) {
+        var _a, _b;
+        super.contentAvailableCallback(props);
+        if (!this.hideSuggestions && this.visibleSuggestions.length > 0) {
+            const rect = (_a = this.input) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const suggestRect = (_b = this.suggestionsContainer) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (rect && suggestRect) {
+                this.suggestionsOnTop = rect.bottom + suggestRect.height > window.innerHeight && rect.top - suggestRect.height > 0;
+            }
         }
     }
     updateValueFromInputField() {
         var _a;
-        this.value = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || "";
-        this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
+        this.setValue(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || "", true);
     }
-    liveUpdateValueFromInputField() {
+    handleInput() {
         var _a;
-        this.value = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || "";
+        const newValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || "";
+        if (this.value !== newValue) {
+            this.hideSuggestions = false;
+            this.value = newValue;
+            this.dispatchEvent(new CustomEvent("live-change", { detail: this.value }));
+        }
+    }
+    handleClick() {
+        this.hideSuggestions = false;
+    }
+    setValue(newValue, fireEvent) {
+        this.value = newValue;
+        if (fireEvent) {
+            this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
+        }
+    }
+    handleKeyboardNavigation(event) {
+        var _a;
+        if ((event.key === "ArrowDown" || event.key === "ArrowUp")) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.hideSuggestions = false;
+            const currentSuggestion = this.visibleSuggestions.findIndex((element) => element.matches((":focus-within")));
+            let target;
+            if (event.key === "ArrowDown") {
+                target = currentSuggestion < this.visibleSuggestions.length - 1 ? currentSuggestion + 1 : 0;
+            }
+            else {
+                target = currentSuggestion > 0 ? currentSuggestion - 1 : this.visibleSuggestions.length - 1;
+            }
+            (_a = this.visibleSuggestions[target]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (event.key == "Escape" || event.key == "Enter") {
+            this.hideSuggestions = true;
+        }
+    }
+    onSuggestionSelected(event) {
+        var _a;
+        this.setValue(event.detail, true);
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+        setTimeout(() => this.hideSuggestions = true, 0);
+    }
+    onFocus() {
+        this.focused = true;
+        this.hideSuggestions = false;
+    }
+    onInputBlur() {
+        this.focused = false;
     }
 }
 FtTextField.elementDefinitions = {
@@ -108,13 +182,13 @@ FtTextField.styles = [
     styles
 ];
 __decorate([
-    property({ type: String })
+    property()
 ], FtTextField.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], FtTextField.prototype, "value", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], FtTextField.prototype, "helper", void 0);
 __decorate([
     property({ type: Boolean })
@@ -126,18 +200,36 @@ __decorate([
     property({ type: Boolean })
 ], FtTextField.prototype, "error", void 0);
 __decorate([
-    query(".ft-text-field--input")
-], FtTextField.prototype, "input", void 0);
-__decorate([
-    property({ type: String })
+    property()
 ], FtTextField.prototype, "prefix", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], FtTextField.prototype, "icon", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], FtTextField.prototype, "iconVariant", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtTextField.prototype, "filterSuggestions", void 0);
 __decorate([
     state()
 ], FtTextField.prototype, "focused", void 0);
+__decorate([
+    state()
+], FtTextField.prototype, "suggestionsOnTop", void 0);
+__decorate([
+    state()
+], FtTextField.prototype, "hideSuggestions", void 0);
+__decorate([
+    state()
+], FtTextField.prototype, "visibleSuggestions", void 0);
+__decorate([
+    query(".ft-text-field--input")
+], FtTextField.prototype, "input", void 0);
+__decorate([
+    query(".ft-text-field--suggestions")
+], FtTextField.prototype, "suggestionsContainer", void 0);
+__decorate([
+    queryAssignedElements({ selector: "ft-text-field-suggestion" })
+], FtTextField.prototype, "suggestions", void 0);
 //# sourceMappingURL=ft-text-field.js.map