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

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

@@ -1,6 +1,6 @@
 import { Status } from "@fluid-topics/ft-wc-utils";
 import { FtdsBaseInterface } from "@fluid-topics/ft-wc-utils/build/FtdsBase";
-import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtIcon, FtIconVariants } from "@fluid-topics/ft-icon";
 export interface FtdsBaseInputProperties extends FtdsBaseInterface {
     status: Status;
     disabled: boolean;
@@ -11,9 +11,11 @@ export interface FtdsBaseInputProperties extends FtdsBaseInterface {
     warningMessages?: string[];
     helperText?: string;
     appendIcon?: FtIcon | true;
+    appendIconVariant: FtIconVariants;
     appendIconLabel?: string;
     appendIconIsClickable?: boolean;
     prependIcon?: FtIcon | true;
+    prependIconVariant: FtIconVariants;
     prependIconLabel?: string;
     prependIconIsClickable?: boolean;
 }

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

@@ -25,6 +25,8 @@ export declare const FtdsBaseInputCssVariables: {
     focusFocusRingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     appendIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     prependIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    appendIconScale: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    prependIconScale: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     helperHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     helperHorizontalGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     helperIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;

package/build/ft-base-input.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { FtCssVariableFactory, textInput, typographyBody2Medium, typographyCaption2Medium, } from "@fluid-topics/ft-wc-utils";
+import { FtCssVariableFactory, textInput, typographyBody2Medium, typographyCaption2Medium } from "@fluid-topics/ft-wc-utils";
 export const FtdsBaseInputCssVariables = {
     defaultInputFontSize: FtCssVariableFactory.create("--ftds-base-input-default-input-font-size", "", "SIZE", typographyBody2Medium.fontSize),
     defaultInputLineHeight: FtCssVariableFactory.create("--ftds-base-input-default-input-line-height", "", "NUMBER", typographyBody2Medium.lineHeight),
@@ -27,6 +27,8 @@ export const FtdsBaseInputCssVariables = {
     focusFocusRingColor: FtCssVariableFactory.create("--ftds-base-input-focus-ring-color", "", "COLOR", textInput.focusFocusRingColor),
     appendIconColor: FtCssVariableFactory.create("--ftds-base-input-append-icon-color", "", "COLOR", textInput.trailingIconColor),
     prependIconColor: FtCssVariableFactory.create("--ftds-base-input-prepend-icon-color", "", "COLOR", textInput.trailingIconColor),
+    appendIconScale: FtCssVariableFactory.create("--ftds-base-input-append-icon-scale", "", "NUMBER", "1.5"),
+    prependIconScale: FtCssVariableFactory.create("--ftds-base-input-prepend-icon-scale", "", "NUMBER", "1.5"),
     helperHorizontalPadding: FtCssVariableFactory.create("--ftds-base-input-helper-horizontal-padding", "", "COLOR", textInput.helperHorizontalPadding),
     helperHorizontalGap: FtCssVariableFactory.create("--ftds-base-input-helper-horizontal-gap", "", "COLOR", textInput.helperHorizontalGap),
     helperIconSize: FtCssVariableFactory.create("--ftds-base-input-helper-icon-size", "", "COLOR", textInput.helperIconSize),
@@ -65,7 +67,6 @@ export const styles = css `
         flex-direction: column;
         align-items: stretch;
         position: relative;
-        height: var(--field-height);
     }
 
     .ftds-input.ftds--size-large {
@@ -91,6 +92,7 @@ export const styles = css `
     .inside-structure {
         width: 100%;
         box-sizing: border-box;
+        height: var(--field-height);
         font-size: ${FtdsBaseInputCssVariables.defaultInputFontSize};
         line-height: ${FtdsBaseInputCssVariables.defaultInputLineHeight};
         border: ${FtdsBaseInputCssVariables.defaultBorderWidth} solid ${FtdsBaseInputCssVariables.defaultBorderColor};
@@ -148,11 +150,19 @@ export const styles = css `
         color: ${FtdsBaseInputCssVariables.appendIconColor};
     }
 
+    .inside-structure .inside-structure--icon.append ftds-button {
+        --ft-button-icon-only-scale: ${FtdsBaseInputCssVariables.appendIconScale};
+    }
+
     .inside-structure .inside-structure--icon.prepend {
         left: var(--field-horizontal-padding);
         color: ${FtdsBaseInputCssVariables.prependIconColor};
     }
 
+    .inside-structure .inside-structure--icon.prepend ftds-button {
+        --ft-button-icon-only-scale: ${FtdsBaseInputCssVariables.prependIconScale};
+    }
+
     .inside-structure .inside-structure--icon.append button {
         color: ${FtdsBaseInputCssVariables.appendIconColor};
     }
@@ -189,7 +199,7 @@ export const styles = css `
         margin-top: ${FtdsBaseInputCssVariables.helperHorizontalGap};
         padding-left: ${FtdsBaseInputCssVariables.helperHorizontalPadding};
         --ftds-helper-text-icon-size: ${FtdsBaseInputCssVariables.helperIconSize};
-        --ftds-helper-text-icon-horizontal-gap:${FtdsBaseInputCssVariables.helperIconHorizontalGap};
+        --ftds-helper-text-icon-horizontal-gap: ${FtdsBaseInputCssVariables.helperIconHorizontalGap};
         --ftds-helper-text-color: ${FtdsBaseInputCssVariables.defaultHelperTextColor};
         --ftds-helper-text-error-icon-color: ${FtdsBaseInputCssVariables.errorHelperIconColor};
         --ftds-helper-text-warning-icon-color: ${FtdsBaseInputCssVariables.warningHelperIconColor};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-base-input",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Base input structure for Admin Design System inputs",
   "keywords": [
     "Lit"
@@ -19,12 +19,12 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-icon": "1.3.1",
-    "@fluid-topics/ft-input-label": "1.3.1",
-    "@fluid-topics/ft-ripple": "1.3.1",
-    "@fluid-topics/ft-typography": "1.3.1",
-    "@fluid-topics/ft-wc-utils": "1.3.1",
+    "@fluid-topics/ft-icon": "1.3.3",
+    "@fluid-topics/ft-input-label": "1.3.3",
+    "@fluid-topics/ft-ripple": "1.3.3",
+    "@fluid-topics/ft-typography": "1.3.3",
+    "@fluid-topics/ft-wc-utils": "1.3.3",
     "lit": "3.1.0"
   },
-  "gitHead": "ba07775e09d57ec38038f07f9c03b52aea08376b"
+  "gitHead": "1b75383f913a10dc67e677d1b44eea930ed5e41f"
 }