@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
362 lines (361 loc) • 11.5 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Subscription } from 'rxjs';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { ElementRef, EventEmitter, NgZone, ChangeDetectorRef, Injector, Renderer2, SimpleChanges, QueryList } from '@angular/core';
import { IconShowOptions } from './models/icon-show-options';
import { SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { SVGIcon } from '@progress/kendo-angular-icons';
import { InputSize, InputRounded, InputFillMode, InputType } from '../common/models';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI TextBox component for Angular.
* Use this component to create styled and feature-rich text input fields.
*
* @example
* ```html
* <kendo-textbox placeholder="Enter text"></kendo-textbox>
* ```
*
* @remarks
* Supported children components are: {@link TextBoxCustomMessagesComponent}.
*/
export declare class TextBoxComponent implements ControlValueAccessor {
private localizationService;
private ngZone;
private changeDetector;
protected renderer: Renderer2;
private injector;
hostElement: ElementRef;
/**
* @hidden
*/
focusableId: string;
/**
* Sets the `title` attribute of the `input` element of the TextBox.
*/
title: string;
/**
* Sets the `type` attribute of the `input` element of the TextBox.
* @default 'text'
*/
type: InputType;
/**
* Sets the disabled state of the TextBox. To disable the component in reactive forms, see [Forms Support](slug:formssupport_textbox#toc-managing-the-textbox-disabled-state-in-reactive-forms).
* @default false
*/
disabled: boolean;
/**
* Sets the read-only state of the component.
* @default false
*/
readonly: boolean;
/**
* Specifies the `tabindex` of the TextBox.
* @default 0
*/
tabindex: number;
/**
* Provides a value for the TextBox.
*/
value: string;
/**
* Highlights the whole value when you click the TextBox.
* @default false
*/
selectOnFocus: boolean;
/**
* Specifies when to show the Success icon ([see example]({% slug validation_textbox %})).
*
* @default false
*/
showSuccessIcon: IconShowOptions;
/**
* Specifies when to show the Error icon ([see example]({% slug validation_textbox %})).
*
* @default false
*/
showErrorIcon: IconShowOptions;
/**
* Shows a **Clear** button in the TextBox.
* @default false
*/
clearButton: boolean;
/**
* Sets a custom icon for valid user input.
*/
successIcon: string;
/**
* Sets a custom SVG icon for valid user input.
*/
successSvgIcon: SVGIcon;
/**
* Sets a custom icon for invalid user input.
*/
errorIcon: string;
/**
* Sets a custom SVG icon for invalid user input.
*/
errorSvgIcon: SVGIcon;
/**
* Sets a custom icon for the **Clear** button.
*/
clearButtonIcon: string;
/**
* Sets a custom SVG icon for the **Clear** button.
*/
clearButtonSvgIcon: SVGIcon;
/**
* Sets the padding of the TextBox internal input element ([see example]({% slug appearance_textbox %}#toc-size)).
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Sets the border radius of the TextBox ([see example](slug:appearance_textbox#toc-roundness)).
* @default 'medium'
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* Sets the background and border styles of the TextBox ([see example]({% slug appearance_textbox %}#toc-fill-mode)).
* @default 'solid'
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Sets the placeholder text displayed when the component is empty.
*/
placeholder: string;
/**
* Sets the maximum length of the TextBox value.
*/
maxlength: number;
/**
* Sets the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for component functionality.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
/**
* Fires when the value changes—when the component is blurred or the value is cleared through the **Clear** button ([see example](slug:events_textbox)).
* Does not fire when you change the value programmatically through `ngModel` or `formControl`.
*/
valueChange: EventEmitter<any>;
/**
* Fires when the user focuses the `input` element.
*/
inputFocus: EventEmitter<any>;
/**
* Fires when the `input` element is blurred.
*/
inputBlur: EventEmitter<any>;
/**
* Fires when the user focuses the TextBox component.
*
*/
onFocus: EventEmitter<any>;
/**
* Fires when the TextBox component is blurred.
*
*/
onBlur: EventEmitter<any>;
/**
* Gets a reference to the visible `input` element of the TextBox.
*/
input: ElementRef;
/**
* @hidden
*/
textBoxSuffixTemplate: QueryList<TextBoxSuffixTemplateDirective>;
/**
* @hidden
*/
textBoxPrefixTemplate: QueryList<TextBoxPrefixTemplateDirective>;
/**
* @hidden
*/
suffixTemplate: SuffixTemplateDirective;
/**
* @hidden
*/
prefixTemplate: PrefixTemplateDirective;
get disabledClass(): boolean;
hostClasses: boolean;
direction: string;
/**
* @hidden
*/
showClearButton: boolean;
/**
* @hidden
*/
clearButtonClicked: boolean;
/**
* @hidden
*/
suffix: TextBoxSuffixTemplateDirective | SuffixTemplateDirective;
/**
* @hidden
*/
prefix: TextBoxPrefixTemplateDirective | PrefixTemplateDirective;
protected control: NgControl;
protected subscriptions: Subscription;
private _isFocused;
private focusChangedProgrammatically;
private _inputAttributes;
private _size;
private _rounded;
private _fillMode;
private parsedAttributes;
private get defaultAttributes();
constructor(localizationService: LocalizationService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, injector: Injector, hostElement: ElementRef);
ngOnInit(): void;
ngAfterViewInit(): void;
ngAfterContentInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* @hidden
*/
svgIcon(name: string): SVGIcon;
/**
* Focuses the TextBox.
*/
focus(): void;
/**
* Removes focus from the TextBox.
*/
blur(): void;
/**
* @hidden
*/
handleInputFocus: () => void;
/**
* @hidden
*/
handleInputBlur: () => void;
/**
* @hidden
*/
handleInput: (ev: any) => void;
/**
* @hidden
*/
clearTitle(): string;
/**
* @hidden
*/
checkClearButton(): void;
/**
* @hidden
*/
clearValue(ev?: any): void;
/**
* @hidden
*/
writeValue(value: string): void;
/**
* @hidden
*/
registerOnChange(fn: () => any): void;
/**
* @hidden
*/
registerOnTouched(fn: () => any): void;
/**
* @hidden
* Called when the status of the component changes to or from `disabled`.
* Depending on the value, it enables or disables the appropriate DOM element.
*
* @param isDisabled
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
showErrorsInitial(): boolean;
/**
* @hidden
*/
private showSuccessInitial;
/**
* @hidden
*/
get isControlInvalid(): boolean;
/**
* @hidden
*/
get successIconClasses(): string;
/**
* @hidden
*/
get customSuccessIconClasses(): string;
/**
* @hidden
*/
get errorIconClasses(): string;
/**
* @hidden
*/
get customIconClasses(): string;
/**
* @hidden
*/
get customClearButtonClasses(): string;
/**
* @hidden
*/
get clearButtonClass(): string;
/**
* @hidden
*/
get hasErrors(): boolean;
/**
* @hidden
*/
get isSuccessful(): boolean;
/**
* @hidden
*/
get isFocused(): boolean;
/**
* @hidden
*/
set isFocused(value: boolean);
/**
* @hidden
*/
get isControlRequired(): boolean;
private ngChange;
private ngTouched;
private setSelection;
private selectAll;
private updateValue;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleBlur(): void;
private handleClasses;
private configureAdornments;
private setInputAttributes;
static ɵfac: i0.ɵɵFactoryDeclaration<TextBoxComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TextBoxComponent, "kendo-textbox", ["kendoTextBox"], { "focusableId": { "alias": "focusableId"; "required": false; }; "title": { "alias": "title"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; }; "showSuccessIcon": { "alias": "showSuccessIcon"; "required": false; }; "showErrorIcon": { "alias": "showErrorIcon"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "successIcon": { "alias": "successIcon"; "required": false; }; "successSvgIcon": { "alias": "successSvgIcon"; "required": false; }; "errorIcon": { "alias": "errorIcon"; "required": false; }; "errorSvgIcon": { "alias": "errorSvgIcon"; "required": false; }; "clearButtonIcon": { "alias": "clearButtonIcon"; "required": false; }; "clearButtonSvgIcon": { "alias": "clearButtonSvgIcon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "onFocus": "focus"; "onBlur": "blur"; }, ["suffixTemplate", "prefixTemplate", "textBoxSuffixTemplate", "textBoxPrefixTemplate"], never, true, never>;
}