@fluid-topics/ft-text-input 1.3.14 → 1.3.16

package/build/ftds-text-input.d.ts

@@ -2,11 +2,15 @@ import { FtdsTextInputProperties, FtdsTextInputType } from "./ftds-text-input.pr
 import { PropertyValues } from "lit/development";
 import { ElementDefinitionsMap, FtdsBase } from "@fluid-topics/ft-wc-utils";
 import { FtIcons } from "@fluid-topics/ft-icon";
+export declare class ClearEvent extends Event {
+    constructor();
+}
 declare const FtdsTextInput_base: typeof FtdsBase & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-wc-utils").FtInputInterface<string>> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtdsTextInput extends FtdsTextInput_base implements FtdsTextInputProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
     type: FtdsTextInputType;
+    clearable: boolean;
     private showClearPassword;
     private input?;
     constructor();
@@ -14,9 +18,10 @@ export declare class FtdsTextInput extends FtdsTextInput_base implements FtdsTex
     onInput(): void;
     connectedCallback(): void;
     protected willUpdate(props: PropertyValues): void;
-    get showLabel(): string | false;
-    get passwordIconForCurrentState(): FtIcons.EYE_SLASH | FtIcons.EYE | undefined;
+    get appendIcon(): FtIcons.EYE_SLASH | FtIcons.X_MARK | FtIcons.EYE | undefined;
+    get appendIconLabel(): string;
     protected render(): import("lit-html").TemplateResult<1>;
+    private onAppendedIconClick;
     private updateTypeBasedAdditionalRules;
 }
 export {};

package/build/ftds-text-input.js

@@ -18,11 +18,17 @@ import { withI18n } from "@fluid-topics/ft-i18n";
 import { textInputContext, textInputDefaultMessages } from "./TextInputMessages";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtdsBaseInput } from "@fluid-topics/ft-base-input";
+export class ClearEvent extends Event {
+    constructor() {
+        super("clear");
+    }
+}
 class FtdsTextInput extends withI18n(toFtInput(FtdsBase)) {
     constructor() {
         var _a;
         super();
         this.type = FtdsTextInputType.text;
+        this.clearable = false;
         this.showClearPassword = false;
         this.value = (_a = this.value) !== null && _a !== void 0 ? _a : "";
         this.addI18nContext(textInputContext, textInputDefaultMessages);
@@ -47,11 +53,26 @@ class FtdsTextInput extends withI18n(toFtInput(FtdsBase)) {
             this.updateTypeBasedAdditionalRules(this.type);
         }
     }
-    get showLabel() {
-        return !this.hideLabel && this.label;
+    get appendIcon() {
+        if (this.disabled) {
+            return undefined;
+        }
+        if (this.type === FtdsTextInputType.password) {
+            return this.showClearPassword ? FtIcons.EYE_SLASH : FtIcons.EYE;
+        }
+        if (this.clearable && this.value) {
+            return FtIcons.X_MARK;
+        }
+        return undefined;
     }
-    get passwordIconForCurrentState() {
-        return (this.type === FtdsTextInputType.password && !this.disabled) ? (this.showClearPassword ? FtIcons.EYE_SLASH : FtIcons.EYE) : undefined;
+    get appendIconLabel() {
+        if (this.type === FtdsTextInputType.password) {
+            return this.showClearPassword ? textInputContext.messages.hidePassword() : textInputContext.messages.showPassword();
+        }
+        if (this.clearable) {
+            return textInputContext.messages.clear();
+        }
+        return "";
     }
     render() {
         const inputClasses = classMap({
@@ -73,13 +94,12 @@ class FtdsTextInput extends withI18n(toFtInput(FtdsBase)) {
                 ?hideLabel=${this.hideLabel}
                 ?raiseLabel=${(this.type == FtdsTextInputType.date || this.type == FtdsTextInputType.time || this.focused || this.value != "")}
 
-                .appendIcon=${this.passwordIconForCurrentState}
-                .appendIconLabel=${this.showClearPassword ? textInputContext.messages.hidePassword() : textInputContext.messages.showPassword()}
+                .appendIcon=${this.appendIcon}
+                .appendIconLabel=${this.appendIconLabel}
                 appendIconIsClickable
-                @append-icon-click="${() => this.showClearPassword = !this.showClearPassword}"
+                @append-icon-click="${this.onAppendedIconClick}"
 
             >
-
                 <input class="${inputClasses}"
                        name="${this.name}"
                        .value=${this.value}
@@ -92,12 +112,19 @@ class FtdsTextInput extends withI18n(toFtInput(FtdsBase)) {
                        aria-invalid="${this.status === Status.error}"
                        aria-describedby="${this.messagesForScreenReaderElementId}"
                 />
-
                 ${this.renderMessagesForScreenReader()}
-
             </ftds-base-input>
         `;
     }
+    onAppendedIconClick() {
+        if (this.type === FtdsTextInputType.password) {
+            this.showClearPassword = !this.showClearPassword;
+        }
+        else if (this.clearable) {
+            this.value = "";
+            this.dispatchEvent(new ClearEvent());
+        }
+    }
     updateTypeBasedAdditionalRules(type) {
         this.additionalErrorRules = (() => {
             switch (type) {
@@ -128,6 +155,9 @@ FtdsTextInput.styles = [styles];
 __decorate([
     property()
 ], FtdsTextInput.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsTextInput.prototype, "clearable", void 0);
 __decorate([
     state()
 ], FtdsTextInput.prototype, "showClearPassword", void 0);

package/build/ftds-text-input.properties.d.ts

@@ -6,8 +6,10 @@ export declare enum FtdsTextInputType {
     url = "url",
     number = "number",
     date = "date",
-    time = "time"
+    time = "time",
+    search = "search"
 }
 export interface FtdsTextInputProperties extends FtInputInterface<string> {
     type: FtdsTextInputType;
+    clearable: boolean;
 }

package/build/ftds-text-input.properties.js

@@ -7,4 +7,5 @@ export var FtdsTextInputType;
     FtdsTextInputType["number"] = "number";
     FtdsTextInputType["date"] = "date";
     FtdsTextInputType["time"] = "time";
+    FtdsTextInputType["search"] = "search";
 })(FtdsTextInputType || (FtdsTextInputType = {}));

package/build/ftds-text-input.styles.js

@@ -39,4 +39,9 @@ export const styles = css `
         font-weight: ${typographyBody2Medium.fontWeight};
     }
 
+    input[type="search"]::-webkit-search-cancel-button,
+    input[type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none;
+        appearance: none;
+    }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-text-input",
-    "version": "1.3.14",
+    "version": "1.3.16",
     "description": "Text Input",
     "keywords": [
         "Lit"
@@ -19,17 +19,17 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-base-input": "1.3.14",
-        "@fluid-topics/ft-i18n": "1.3.14",
-        "@fluid-topics/ft-icon": "1.3.14",
-        "@fluid-topics/ft-input-helper-text": "1.3.14",
-        "@fluid-topics/ft-input-label": "1.3.14",
-        "@fluid-topics/ft-tooltip": "1.3.14",
-        "@fluid-topics/ft-wc-utils": "1.3.14",
+        "@fluid-topics/ft-base-input": "1.3.16",
+        "@fluid-topics/ft-i18n": "1.3.16",
+        "@fluid-topics/ft-icon": "1.3.16",
+        "@fluid-topics/ft-input-helper-text": "1.3.16",
+        "@fluid-topics/ft-input-label": "1.3.16",
+        "@fluid-topics/ft-tooltip": "1.3.16",
+        "@fluid-topics/ft-wc-utils": "1.3.16",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.14"
+        "@fluid-topics/ft-wc-test-utils": "1.3.16"
     },
-    "gitHead": "18f0f8e7a68ec235ee6838c4f86002821393322e"
+    "gitHead": "092d409b397263ffef1f860386137eea8e5f7c2c"
 }