@fluid-topics/ft-base-input 1.3.1 → 1.3.2

package/build/ft-base-input.d.ts

@@ -1,6 +1,6 @@
-import { ElementDefinitionsMap, FtdsBase, Status } from "@fluid-topics/ft-wc-utils";
+import { DesignSystemSize, ElementDefinitionsMap, FtdsBase, Status } from "@fluid-topics/ft-wc-utils";
 import { FtdsBaseInputProperties } from "./ft-base-input.properties";
-import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtIcon, FtIconVariants } from "@fluid-topics/ft-icon";
 export declare class FtdsBaseInput extends FtdsBase implements FtdsBaseInputProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult[];
@@ -11,9 +11,11 @@ export declare class FtdsBaseInput extends FtdsBase implements FtdsBaseInputProp
     raiseLabel: boolean;
     helperText?: string;
     appendIcon?: FtIcon | true;
+    appendIconVariant: FtIconVariants;
     appendIconLabel?: string;
     appendIconIsClickable: boolean;
     prependIcon?: FtIcon | true;
+    prependIconVariant: FtIconVariants;
     prependIconLabel?: string;
     prependIconIsClickable: boolean;
     errorMessages: string[];
@@ -24,6 +26,7 @@ export declare class FtdsBaseInput extends FtdsBase implements FtdsBaseInputProp
     private setFocusState;
     private focusSlottedInput;
     get shouldShowLabel(): string | false;
+    get iconSize(): DesignSystemSize.medium | DesignSystemSize.small;
     protected render(): import("lit-html").TemplateResult<1>;
     private renderIcon;
 }

package/build/ft-base-input.js

@@ -4,16 +4,18 @@ 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, nothing, } from "lit";
+import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
-import { FtdsBase, Status, } from "@fluid-topics/ft-wc-utils";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DesignSystemFamily, DesignSystemSize, FtdsBase, Status } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-base-input.styles";
 import { FtdsInputHelperText } from "@fluid-topics/ft-input-helper-text";
 import { FtdsInputLabel } from "@fluid-topics/ft-input-label";
-import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtIcon, FtIconVariants } from "@fluid-topics/ft-icon";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtdsButton } from "@fluid-topics/ft-button";
 class FtdsBaseInput extends FtdsBase {
     constructor() {
         super(...arguments);
@@ -22,7 +24,9 @@ class FtdsBaseInput extends FtdsBase {
         this.label = "";
         this.hideLabel = false;
         this.raiseLabel = false;
+        this.appendIconVariant = FtIconVariants.fluid_topics;
         this.appendIconIsClickable = false;
+        this.prependIconVariant = FtIconVariants.fluid_topics;
         this.prependIconIsClickable = false;
         this.errorMessages = [];
         this.warningMessages = [];
@@ -40,6 +44,16 @@ class FtdsBaseInput extends FtdsBase {
     get shouldShowLabel() {
         return !this.hideLabel && this.label;
     }
+    get iconSize() {
+        switch (this.size) {
+            case DesignSystemSize.large:
+                return DesignSystemSize.medium;
+            case DesignSystemSize.medium:
+                return DesignSystemSize.small;
+            default:
+                return DesignSystemSize.medium;
+        }
+    }
     render() {
         const classes = {
             "ftds-input": true,
@@ -61,7 +75,7 @@ class FtdsBaseInput extends FtdsBase {
                                 aria-hidden="true"
                                 text="${this.label}"
                                 ?raised=${this.raiseLabel}
-                                .size="${this.size}"
+                                .size=${this.size}
                             ></ftds-input-label>
                         `)}
                     </slot>
@@ -85,9 +99,9 @@ class FtdsBaseInput extends FtdsBase {
 
                 <slot part="helper-text" name="helper-text">
                     <ftds-input-helper-text
-                        .helperText="${this.helperText}"
-                        .errorMessages="${this.errorMessages}"
-                        .warningMessages="${this.warningMessages}"
+                        .helperText=${this.helperText}
+                        .errorMessages=${this.errorMessages}
+                        .warningMessages=${this.warningMessages}
                     ></ftds-input-helper-text>
                 </slot>
 
@@ -96,6 +110,7 @@ class FtdsBaseInput extends FtdsBase {
     }
     renderIcon(position) {
         const icon = position === "append" ? this.appendIcon : this.prependIcon;
+        const iconVariant = position === "append" ? this.appendIconVariant : this.prependIconVariant;
         const eventName = position === "append" ? "append-icon-click" : "prepend-icon-click";
         const isClickable = position === "append" ? this.appendIconIsClickable : this.prependIconIsClickable;
         const iconText = position === "append" ? this.appendIconLabel : this.prependIconLabel;
@@ -104,22 +119,24 @@ class FtdsBaseInput extends FtdsBase {
         }
         else if (isClickable) {
             return html `
-                <ft-tooltip .text=${iconText}>
-                    <button
-                        .aria-label=${iconText}
-                        @click=${(e) => {
+                <ftds-button
+                    .label=${iconText}
+                    .icon=${icon}
+                    .iconVariant=${iconVariant}
+                    .size=${this.iconSize}
+                    family="${DesignSystemFamily.neutral}"
+
+                    @click=${(e) => {
                 e.stopPropagation();
                 this.dispatchEvent(new CustomEvent(eventName, e));
             }}
-                    >
-                        <ft-icon .value=${icon}></ft-icon>
-                    </button>
-                </ft-tooltip>
+                >
+                </ftds-button>
             `;
         }
         else {
             return html `
-                <ft-icon .value=${icon}></ft-icon>`;
+                <ft-icon aria-label="${ifDefined(iconText)}" aria-hidden="${!!iconText}" .value=${icon}></ft-icon>`;
         }
     }
 }
@@ -127,7 +144,8 @@ FtdsBaseInput.elementDefinitions = {
     "ftds-input-helper-text": FtdsInputHelperText,
     "ftds-input-label": FtdsInputLabel,
     "ft-icon": FtIcon,
-    "ft-tooltip": FtTooltip
+    "ftds-button": FtdsButton,
+    "ft-tooltip": FtTooltip,
 };
 FtdsBaseInput.styles = [
     styles,
@@ -153,6 +171,9 @@ __decorate([
 __decorate([
     property()
 ], FtdsBaseInput.prototype, "appendIcon", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "appendIconVariant", void 0);
 __decorate([
     property()
 ], FtdsBaseInput.prototype, "appendIconLabel", void 0);
@@ -162,6 +183,9 @@ __decorate([
 __decorate([
     property()
 ], FtdsBaseInput.prototype, "prependIcon", void 0);
+__decorate([
+    property()
+], FtdsBaseInput.prototype, "prependIconVariant", void 0);
 __decorate([
     property()
 ], FtdsBaseInput.prototype, "prependIconLabel", void 0);