@scania/tegel
Version:
Tegel Design System
84 lines (83 loc) • 3.19 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
/**
* @slot prefix - Slot for the prefix in the component.
* @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
*/
export declare class TdsTextField {
host: HTMLElement;
private uuid;
/** Text input for focus state */
textInput?: HTMLInputElement;
/** Which input type, text, password or similar */
type: 'text' | 'password' | 'number' | 'email' | 'tel';
/** Position of the label for the Text Field. */
labelPosition: 'inside' | 'outside' | 'no-label';
/** Label text */
label: string;
/** Min allowed value for input type number */
min?: string | number;
/** Max allowed value for input type number */
max?: string | number;
/** Step value for input type number */
step?: string | number;
/** Helper text */
helper?: string;
/** Placeholder text */
placeholder: string;
/** Value of the input text */
value: string;
/** Set input in disabled state */
disabled: boolean;
/** Set input in readonly state */
readOnly: boolean;
/** Hides the read-only icon in the Text Field. Requires Read Only to be enabled. */
hideReadOnlyIcon: boolean;
/** Size of the input */
size: 'sm' | 'md' | 'lg';
/** Mode variant of the Text Field */
modeVariant: 'primary' | 'secondary' | null;
/** Unset minimum width of 208px. */
noMinWidth: boolean;
/** Name property */
name: string;
/** Error state of input */
state: 'error' | 'success' | 'default';
/** Max length of input */
maxLength?: number;
/** Autofocus for input */
autofocus: boolean;
/** Value to be used for the aria-label attribute. Can be used for announcing that readOnly prop is set to true. */
tdsAriaLabel?: string;
/** Makes the text field required */
required: boolean;
/** Value to be used for the text field's autocomplete attribute */
autocomplete: string;
/** Hides the native arrows on number input type */
hideNumberArrows: boolean;
/** Listen to the focus state of the input */
focusInput: boolean;
/** Change event for the Text Field */
tdsChange: EventEmitter;
handleChange(event: Event): void;
/** Input event for the Text Field */
tdsInput: EventEmitter<InputEvent>;
/** Data input event in value prop */
handleInput(event: InputEvent): void;
/** Focus event for the Text Field */
tdsFocus: EventEmitter<FocusEvent>;
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
handleFocus(event: FocusEvent): void;
/** Blur event for the Text Field */
tdsBlur: EventEmitter<FocusEvent>;
/** Error event for the Text Field - emitted when value is clamped to min/max */
tdsError: EventEmitter<{
originalValue: string;
clampedValue: string;
reason: 'min' | 'max';
}>;
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
handleBlur(event: FocusEvent): void;
/** Method to handle focus */
focusElement(): Promise<void>;
render(): any;
}