import { type InputTypeHTMLAttribute } from 'vue';
import { type IconName } from '../Icon';
import type { IconColor } from '../Icon/types';
import type { SbTextFieldModelValue } from './types';
type TextFieldProps = {
/**
* Textfield label
*/
label?: string;
/**
* This will eventually be deprecated. We no longer will be using inline labels in our designs.
* @deprecated
*/
isInlineLabel?: boolean;
/**
* Textfield wrapper class
*/
placeholder?: string;
/**
* Textfield type. It accepts the input types, like text, password, number, and textarea.
*/
type?: InputTypeHTMLAttribute;
/**
* Textfield warning state. Indicates that the textfield has a warning state. It shows a warning icon.
*/
warn?: boolean;
/**
* Textfield error state. Indicates that the textfield has an error state. It shows an error icon.
*/
error?: boolean;
/**
* Textfield error message. The message that will be shown when the textfield has an error state.
*/
errorMessage?: string;
/**
* Textfield description. A description that will be shown below the textfield.
*/
description?: string;
/**
* Textfield help text. It shows in a tooltip when the user hovers the help icon.
*/
helpText?: string;
/**
* Textfield prefix text. It will be shown before the input.
*/
prefix?: string;
/**
* Textfield suffix text. It will be shown after the input.
*/
suffix?: string;
/**
* Textfield disabled state. The disable state does not remove the focus of the input
*/
disabled?: boolean;
/**
* Disables interaction with the field.
*/
readonly?: boolean;
/**
* Textfield required state
*/
required?: boolean;
/**
* Indicates the icon name placed on the left side of the textfield
*/
iconLeft?: IconName;
/**
* Indicates the icon name placed on the right side of the textfield
*/
iconRight?: IconName;
/**
* Indicates if the iconRight is interactive. When it is true, a SbIconButton is used instead of SbIcon
*/
iconRightInteractive?: boolean;
/**
* Indicates the label of the iconRight when it is interactive. This is mandatory when the iconRight is interactive, as a label needs to be associated with the button.
*/
iconRightLabel?: string;
/**
* Indicates the color of the icon. Applies to both iconLeft and iconRight
*/
iconColor?: IconColor;
/**
* Indicates if the textfield has an icon button to clear its value. The clear icon button is shown when the textfield has a value
*/
clearable?: boolean;
/**
* Indicates the label of the clear icon button
*/
clearIconButtonLabel?: string;
/**
* Textfield value
*/
modelValue?: SbTextFieldModelValue;
/**
* Textfield mask. It uses the maska library to mask the input value. This property is used as the parameter of the maska directive
*/
mask?: string;
/**
* Textfield pattern. It is used to validate the input value. This property is used as the parameter of the pattern attribute of the input element
*/
pattern?: string;
/**
* Textfield maxlength. This property does not prevent the user from input more data then the set maximum, but shows the counter of the remaining and exceeded characters.
*/
maxlength?: string | number;
/**
* Textfield minlength. It is used to validate the minimum number of characters that the user can input. This property is used as the parameter of the minlength attribute of the input element
*/
minlength?: string | number;
/**
* Textfield id attribute
*/
id?: string;
/**
* Textfield name attribute. This property is used as the parameter of the name attribute of the input element
*/
name?: string;
/**
* Textfield autocomplete attribute. This property is used as the parameter of the autocomplete attribute of the input element
*/
autocomplete?: string;
/**
* Textfield useAutofocus attribute. This property is used to focus on the input.
*/
useAutofocus?: boolean;
/**
* Textfield step attribute. This property is used as the parameter of the step attribute of the input element
*/
step?: string | number;
/**
* Textfield wrapper class. This property is used to add a custom class to the wrapper div of the textfield
*/
wrapperClass?: string;
/**
* Textfield aria-busy attribute. This property is used as the parameter of the aria-busy attribute of the input element. This property was added because there are some components that need to indicate that they are loading data, like the SbMinibrowser
*/
ariaBusy?: boolean;
/**
* Textfield rows attribute. This property is used to define the number of visible text lines in a textarea element.
* This property was added to support textarea height control and resolve type errors for the `rows` attribute.
*/
rows?: number;
/**
* Textfield dir attribute. This property is used as the parameter of the dir attribute of the input element
*/
dir?: HTMLInputElement['dir'];
counterClass?: string;
messageClass?: string;
};
declare function focus(): void;
declare var __VLS_6: {}, __VLS_8: {}, __VLS_15: {}, __VLS_17: {}, __VLS_50: {
onKeydown: () => void;
};
type __VLS_Slots = {} & {
prefix?: (props: typeof __VLS_6) => any;
} & {
icons?: (props: typeof __VLS_8) => any;
} & {
input?: (props: typeof __VLS_15) => any;
} & {
default?: (props: typeof __VLS_17) => any;
} & {
suffix?: (props: typeof __VLS_50) => any;
};
declare const __VLS_base: import("vue").DefineComponent any;
focus: (event: Event) => any;
keydown: (event: KeyboardEvent) => any;
keypress: (event: KeyboardEvent) => any;
keyup: (event: KeyboardEvent) => any;
mousedown: (event: MouseEvent) => any;
mouseup: (event: MouseEvent) => any;
"update:modelValue": (value: string) => any;
clear: (value: SbTextFieldModelValue) => any;
"icon-click": () => any;
}, string, import("vue").PublicProps, Readonly & Readonly<{
onBlur?: ((value: string) => any) | undefined;
onFocus?: ((event: Event) => any) | undefined;
onKeydown?: ((event: KeyboardEvent) => any) | undefined;
onKeypress?: ((event: KeyboardEvent) => any) | undefined;
onKeyup?: ((event: KeyboardEvent) => any) | undefined;
onMousedown?: ((event: MouseEvent) => any) | undefined;
onMouseup?: ((event: MouseEvent) => any) | undefined;
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
onClear?: ((value: SbTextFieldModelValue) => any) | undefined;
"onIcon-click"?: (() => any) | undefined;
}>, {
label: string;
mask: string;
pattern: string;
id: string;
disabled: boolean;
error: boolean;
prefix: string;
ariaBusy: boolean;
name: string;
description: string;
type: InputTypeHTMLAttribute;
placeholder: string;
step: string | number;
modelValue: string | null;
required: boolean;
rows: number;
iconRight: IconName;
readonly: boolean;
clearable: boolean;
errorMessage: string;
autocomplete: string;
isInlineLabel: boolean;
warn: boolean;
helpText: string;
suffix: string;
iconLeft: IconName;
iconRightInteractive: boolean;
iconRightLabel: string;
iconColor: IconColor;
clearIconButtonLabel: string;
maxlength: string | number;
minlength: string | number;
useAutofocus: boolean;
wrapperClass: string;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots;
declare const _default: typeof __VLS_export;
export default _default;
type __VLS_WithSlots = T & {
new (): {
$slots: S;
};
};