import { FRoot } from "../../mixins/components/f-root/f-root"; export type FInputState = "primary" | "default" | "success" | "warning" | "danger"; export type FInputCustomEvent = { value?: string | number; type: "clear" | "input"; }; export type FInputSuffixWhen = (value?: string | number) => boolean; export declare class FInputBase extends FRoot { /** * @attribute local state for password to text toggling and vice versa. */ showPassword: boolean; /** * @attribute Variants are various visual representations of an input field. */ variant?: "curved" | "round" | "block"; /** * @attribute Categories are various visual representations of an input field. */ category?: "fill" | "outline" | "transparent"; /** * @attribute States are used to communicate purpose and connotations. */ state?: FInputState; /** * @attribute f-input can have 2 sizes. By default size is inherited by the parent f-field. */ size?: "medium" | "small"; /** * @attribute The type attribute specifies the type of element to display. */ type?: "text" | "number" | "email" | "password" | "url" | "tel"; /** * @attribute Defines the value of an f-input. Validation rules are applied on the value depending on the type property of the f-text-input. */ value?: string | number; /** * @attribute Defines the placeholder text for f-input and f-input-light */ placeholder?: string; /** * @attribute The icon-left property allows the placement of an icon to the left of the input value */ iconLeft?: string; /** * @attribute The icon-right property allows the placement of an icon to the right of the input value */ iconRight?: string; /** * @attribute The prefix property facilitates the addition of a string on the left side of the input box. */ prefix: string | null; /** * @attribute The suffix property facilitates the addition of a string on the right side of the input box. */ suffix?: string; /** * @attribute The maxLength property of an input box specifies the maximum number of characters that a user can input into the field. */ maxLength?: number; /** * @attribute The loading property, when enabled, facilitates the display of a loading icon on the right side of the input box. */ loading?: boolean; /** * @attribute Shows disabled state of input element */ disabled?: boolean; /** * @attribute Displays a close icon-button on the right side of the input that allows the user to clear the input value */ clear?: boolean; /** * @attribute When true the user can not select the input element. */ readOnly?: boolean; suffixWhen?: FInputSuffixWhen; /** * emit input custom event */ handleInput(e: InputEvent): void; /** * clear input value on clear icon clicked */ clearInputValue(): void; dispatchInputEvent(value: string | number | undefined, type: "clear" | "input"): void; /** * icon size */ get iconSize(): "small" | "x-small" | undefined; /** * Toggle Password view */ togglePasswordView(): void; }