import { type IClearable } from '../../../Behaviors/Clearable'; import { type IInvalidable } from '../../../Behaviors/Invalidable'; import { ISlottable } from '../../../Behaviors/Slottable'; import { ResizeMode } from '../../../Types/Resize'; import { TextAlignment } from '../../../Types/TextAlignment'; import { TextBoxType } from '../../../Types/TextBoxType'; import { TextKeyboardMode } from '../../../Types/VirtualKeyboardMode'; import type { IConnectedCallback } from '../../Abstracts/Interfaces/IConnectedCallback'; import { InputBaseElement } from '../Abstracts/InputBase'; import type { ITextBoxElementProps } from './ITextBoxElementProps'; declare const TextBoxElement_base: (abstract new (...args: Array) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array) => import("../../../Behaviors/Clearable").IClearableProps & import("../../../Behaviors/Clearable").IClearableEvents & IClearable) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Labelable").ILabelableProps) & (abstract new (...args: Array) => IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Valueable").IValueableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Busyable").IBusyableProps) & typeof InputBaseElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor; /** * Text Box - A user interface component for entering single-line text. * * @description * The Text Box component is used to input single-line text or data. It provides a field where users can type or paste * information. Text Boxes are commonly used for various types of user input, such as usernames, search queries, or * short messages. It supports various input modes, validation, formatting, and accessibility features. * * @name Text Box * @element mosaik-textbox * @category Forms * * @fires cleared {ClearedEvent} - Fired when the value is cleared. * * @slot prefix - The prefix slot. * @slot suffix - The suffix slot. * @slot label - The label slot. * @slot hint - The hint slot. * * @csspart focusRing - the focus ring part. * @csspart prefix - the prefix part. * @csspart inner - the inner part. * @csspart label - the label part. * @csspart input - the input part. * @csspart suffix - the suffix part. * @csspart hint - the hint part. * * @cssprop {Color} --text-box-background-color - The background color. * @cssprop {Color} --text-box-border-color - The border color. * @cssprop {String} --text-box-border-radius - The border radius. * @cssprop {String} --text-box-border-style - The border style. * @cssprop {String} --text-box-border-width - The border width. * @cssprop {String} --text-box-focus-ring-outward-offset - The focus ring outward offset. * @cssprop {String} --text-box-font-family - The font family. * @cssprop {String} --text-box-font-size - The font size. * @cssprop {String} --text-box-font-weight - The font weight. * @cssprop {Color} --text-box-foreground-color - The foreground color. * @cssprop {String} --text-box-padding-top - The padding top. * @cssprop {String} --text-box-padding-right - The padding right. * @cssprop {String} --text-box-padding-bottom - The padding bottom. * @cssprop {String} --text-box-padding-left - The padding left. * @cssprop {String} --text-box-gap - The gap. * @cssprop {String} --text-box-transition-duration - The transition duration. * @cssprop {String} --text-box-transition-mode - The transition mode. * @cssprop {String} --text-box-transition-property - The transition property. * @cssprop {String} --text-box-shadow - The shadow. * * @dependency {ButtonElement} mosaik-button - The button element. * @dependency {FocusRingElement} mosaik-focus-ring - The focus ring element. * * @example * ```html * * ``` * * @public */ export declare class TextBoxElement extends TextBoxElement_base implements IConnectedCallback, ITextBoxElementProps, IInvalidable, IClearable, ISlottable { private readonly _keyboardController; private _inputElement; private _value; private _multiline; private _multilineRows; private _multilineMaxRows; private _readonly; private _required; private _autofocus; private _name; private _keyboard; private _type; private _pattern; private _placeholder; private _autocomplete; private _minlength; private _maxlength; private _resize; private _textAlign; /** * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * The value of the component. * * @public * @override */ get value(): string; set value(value: string); /** * Determines whether the component is multiline or not. * If `true`, the component will be multiline able. * * @public * @attr */ get multiline(): boolean; set multiline(value: boolean); /** * Determines the number of rows to display when `multiline` is `true`. * * @public * @attr */ get multilineRows(): number; set multilineRows(value: number); /** * Determines the maximum number of rows to display when `multiline` is `true`. * * @public * @attr */ get multilineMaxRows(): number | null; set multilineMaxRows(value: number | null); /** * Determines whether the component is readonly or not. * If `true`, the component will be readonly. * * @public * @attr */ get readonly(): boolean; set readonly(value: boolean); /** * Determines whether the component is required or not. * If `true`, the component will require a value when submitted. * * @public * @attr */ get required(): boolean; set required(value: boolean); /** * Determines whether the component is autofocus or not. * If `true`, the component will receive focus when the page loads. * * @public * @override */ get autofocus(): boolean; set autofocus(value: boolean); /** * The name of the component. * * @public * @attr */ get name(): string; set name(value: string); /** * Determines the virtual keyboard mode. * The virtual keyboard is used on mobile devices. * It displays a virtual keyboard that is optimized for entering * * @public * @attr */ get keyboard(): TextKeyboardMode; set keyboard(value: TextKeyboardMode); /** * The type is determined how the validation is performed. * * @public * @attr */ get type(): TextBoxType; set type(value: TextBoxType); /** * The pattern is used to validate the value of the component. * * @public * @attr */ get pattern(): string; set pattern(value: string); /** * The placeholder is a short hint that is displayed in the component when it is empty. * * @public */ get placeholder(): string; set placeholder(value: string); /** * The autocomplete property specifies whether the component should have autocomplete on or off. * If `true`, the component automatically complete values based on values that the user has entered before. * * @public * @attr */ get autocomplete(): boolean; set autocomplete(value: boolean); /** * Determines the minimum length of the component value. * * @public * @attr */ get minlength(): number | null; set minlength(value: number | null); /** * Determines the maximum length of the component value. * * @public * @attr */ get maxlength(): number | null; set maxlength(value: number | null); /** * Gets or sets the `resize` property. * * @public * @attr */ get resize(): ResizeMode; set resize(value: ResizeMode); /** * Determines the text alignment of the component. * * @public * @attr */ get textAlign(): TextAlignment; set textAlign(value: TextAlignment); /** * Determines whether the element has a prefix or not. * The Prefix is a slot that is displayed before the input. * * @private * @readonly * @attr */ get hasPrefix(): boolean; /** * Determines whether the element has a suffix or not. * The Suffix is a slot that is displayed after the input. * * @private * @readonly * @attr */ get hasSuffix(): boolean; /** * @public * @override */ connectedCallback(): void; /** * Sets focus to the element. * * @public * @override */ focus(): void; /** * Removes focus from the element. * * @public * @override */ blur(): void; /** * Resets the value, all kinds of validation and errors. * * @public * @override */ reset(): void; /** * Clears the value of the element but not the validation. * * @public * @override */ clear(force?: boolean): boolean; /** * Checks the validity of the element and returns `true` if it is valid; otherwise, `false`. * * @public * @override */ checkValidity(): boolean; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @template */ onChange(event: Event): void; /** * @protected * @template * @override */ onInput(event: InputEvent): void; /** * @protected * @template * @override */ onFocus(event: FocusEvent): void; /** * @protected * @template * @override */ onBlur(event: FocusEvent): void; /** * @protected * @template */ onClear(event: Event): void; /** * Adjust the height of the textarea based on content * * @private */ private adjustTextareaHeight; /** * Get the line height of the textarea element * * @private */ private getLineHeight; } export declare function clearCheckFn(e: TextBoxElement): boolean; /** * @public */ export declare namespace TextBoxElement { type Props = ITextBoxElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-textbox': TextBoxElement; } } export {}; //# sourceMappingURL=TextBoxElement.d.ts.map