@fluid-topics/ft-text-field 2.2.34 → 2.2.36

package/build/TextFieldMessages.d.ts

@@ -0,0 +1,7 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtTextFieldMessages extends I18nMessages {
+    clear(): string;
+    cleared(): string;
+}
+export declare const textFieldContext: I18nMessageContext<FtTextFieldMessages>;
+export declare const defaultTextFieldMessages: DefaultI18nMessages<FtTextFieldMessages>;

package/build/TextFieldMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext, } from "@fluid-topics/ft-i18n";
+export const textFieldContext = I18nMessageContext.build("ftTextField");
+export const defaultTextFieldMessages = {
+    "clear": "Clear",
+    "cleared": "Input cleared",
+};

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

@@ -3,7 +3,7 @@ import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTextFieldProperties } from "./ft-text-field.properties";
 import { FtTextFieldSuggestion } from "./ft-text-field-suggestion";
 import { FtTextFieldSuggestionDefinition } from "./models";
-declare const FtTextField_base: import("@fluid-topics/ft-wc-utils").FtFormComponentType<typeof FtLitElement>;
+declare const FtTextField_base: typeof FtLitElement & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtFormComponentInterface> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtTextField extends FtTextField_base implements FtTextFieldProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
@@ -27,6 +27,8 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     passwordRevealedIcon: string;
     iconVariant?: string;
     filterSuggestions: boolean;
+    clearable: boolean;
+    private clearedAnnouncement;
     maxLength?: number;
     password: boolean;
     autocomplete?: string;
@@ -51,6 +53,9 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     protected render(): import("lit").TemplateResult<1>;
     private resolveInputType;
     private renderSuggestions;
+    private get canClear();
+    private renderClearButton;
+    private onClearClick;
     private renderPasswordIcon;
     private renderIcon;
     protected update(props: PropertyValues): void;
@@ -61,6 +66,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private watchAutofillInterval?;
     private setupWatchAutofill;
     private clearWatchAutofill;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     setValue(newValue: string, fireChangeEvent?: boolean): void;
@@ -71,6 +77,7 @@ export declare class FtTextField extends FtTextField_base implements FtTextField
     private onSuggestionSelected;
     private onSuggestionRemoved;
     private onFocus;
+    private keepFocusOnSuggestionsScrollbar;
     private onMainPanelBlur;
     private togglePasswordVisibility;
     private isPasswordField;

package/build/ft-text-field.js

@@ -9,37 +9,17 @@ import { property, query, queryAll, queryAssignedElements, state, } from "lit/de
 import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { cancelable, computeOffsetAutoPosition, FtLitElement, ignoreComposingEvents, noTextInputDefaultClearButton, numberProperty, toFtFormComponent, } from "@fluid-topics/ft-wc-utils";
+import { cancelable, computeOffsetAutoPosition, FtLitElement, ignoreComposingEvents, noTextInputDefaultClearButton, numberProperty, toFtFormComponent, screenReaderStyles, } from "@fluid-topics/ft-wc-utils";
 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 { FtIcon, FtIcons, FtIconVariants, } from "@fluid-topics/ft-icon";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { defaultTextFieldMessages, textFieldContext, } from "./TextFieldMessages";
 import { styles } from "./ft-text-field.styles";
 import { FtTextFieldSuggestion, } from "./ft-text-field-suggestion";
 import { FtTextFieldChangeEvent, FtTextFieldInvalidEvent, FtTextFieldLiveChangeEvent, } from "./models";
-export class FtTextField extends toFtFormComponent(FtLitElement) {
-    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.hideCurrentValueSuggestion = false;
-        this.focused = false;
-        this.inputValid = true;
-        this.hidePassword = true;
-        this.hideSuggestions = true;
-        this.visibleSuggestions = [];
-        this.providedSuggestions = [];
-        this.showSuggestionsOnFocus = true;
-    }
+export class FtTextField extends withI18n(toFtFormComponent(FtLitElement)) {
     /*
      * We prevent lit from creating setter and getter to differentiate
      * when the value change comes from inside or outside the component
@@ -129,10 +109,13 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
                                @keydown=${this.catchComposingEvents}
                                @focus=${this.onFocus}
                         />
+                        ${this.renderClearButton()}
                         ${this.renderIcon()}
+                        <div class="sr-only" aria-live="polite" aria-atomic="true">${this.clearedAnnouncement}</div>
                     </div>
                     <div class="ft-text-field--suggestions"
                          part="suggestions"
+                         @mousedown=${this.keepFocusOnSuggestionsScrollbar}
                          @suggestion-selected=${this.onSuggestionSelected}
                          @suggestion-removed=${this.onSuggestionRemoved}
                     >
@@ -187,6 +170,28 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
             `;
         }
     }
+    get canClear() {
+        return this.clearable && !this.disabled && !this.isPasswordField() && !!this.value;
+    }
+    renderClearButton() {
+        return this.canClear ? html `
+            <button type="button"
+                    class="ft-text-field--clear-button"
+                    part="clear-button"
+                    aria-label="${textFieldContext.messages.clear()}"
+                    @pointerdown=${(e) => e.preventDefault()}
+                    @click=${this.onClearClick}>
+                <ft-icon .variant=${FtIconVariants.fluid_topics}
+                         .value=${FtIcons.CLOSE}></ft-icon>
+            </button>
+        ` : nothing;
+    }
+    onClearClick() {
+        var _a;
+        this.setValue("", true);
+        this.clearedAnnouncement = textFieldContext.messages.cleared();
+        (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     renderPasswordIcon() {
         return html `
             <ft-icon class="ft-text-field--icon"
@@ -279,6 +284,31 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
             clearInterval(this.watchAutofillInterval);
         }
     }
+    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.clearable = false;
+        this.clearedAnnouncement = "";
+        this.password = false;
+        this.hideCurrentValueSuggestion = false;
+        this.focused = false;
+        this.inputValid = true;
+        this.hidePassword = true;
+        this.hideSuggestions = true;
+        this.visibleSuggestions = [];
+        this.providedSuggestions = [];
+        this.showSuggestionsOnFocus = true;
+        this.addI18nContext(textFieldContext, defaultTextFieldMessages);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.setupWatchAutofill();
@@ -352,6 +382,11 @@ export class FtTextField extends toFtFormComponent(FtLitElement) {
             this.hideSuggestions = false;
         }
     }
+    keepFocusOnSuggestionsScrollbar(event) {
+        if (event.target === event.currentTarget) {
+            event.preventDefault();
+        }
+    }
     onMainPanelBlur() {
         var _a, _b;
         if (!((_a = this.mainPanel) === null || _a === void 0 ? void 0 : _a.matches(":focus-within"))) {
@@ -390,6 +425,7 @@ FtTextField.styles = [
     FtTypographyBody1,
     noTextInputDefaultClearButton,
     styles,
+    screenReaderStyles,
 ];
 __decorate([
     property()
@@ -442,6 +478,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtTextField.prototype, "filterSuggestions", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtTextField.prototype, "clearable", void 0);
+__decorate([
+    state()
+], FtTextField.prototype, "clearedAnnouncement", void 0);
 __decorate([
     numberProperty()
 ], FtTextField.prototype, "maxLength", void 0);