@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
433 lines (432 loc) • 13.8 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";
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.
*/
type: InputType;
/**
* Sets the disabled state of the TextBox. To learn how to disable the component in reactive forms, refer to the article on [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;
/**
* Determines whether the whole value will be selected when the TextBox is clicked. Defaults to `false`.
*
* @default false
*/
selectOnFocus: boolean;
/**
* Specifies when the Success icon will be shown ([see example]({% slug validation_textbox %})).
*
* The possible values are:
*
* `boolean`—The Success icon is displayed, if the condition given by the developer is met.
*
* `initial`—The Success icon will be displayed when the component state is neither `invalid` nor `touched` or `dirty`.
*
* @default false
*/
showSuccessIcon: IconShowOptions;
/**
* Specifies when the Error icon will be shown ([see example]({% slug validation_textbox %})).
*
* The possible values are:
*
* * `initial`—The Error icon will be displayed when the component state is
* `invalid` and `touched` or `dirty`.
* * `boolean`—The Error icon is displayed, if the condition given by the developer is met.
*
* @default false
*/
showErrorIcon: IconShowOptions;
/**
* Specifies whether a Clear button will be rendered.
*
* @default false
*/
clearButton: boolean;
/**
* Sets a custom icon that will be rendered instead of the default one for a valid user input.
*/
successIcon: string;
/**
* Sets a custom SVG icon that will be rendered instead of the default one for a valid user input.
*/
successSvgIcon: SVGIcon;
/**
* Sets a custom icon that will be rendered instead of the default one for invalid user input.
*/
errorIcon: string;
/**
* Sets a custom SVG icon that will be rendered instead of the default one for invalid user input.
*/
errorSvgIcon: SVGIcon;
/**
* Sets a custom icon that will be rendered instead of the default one.
*/
clearButtonIcon: string;
/**
* Sets a custom SVG icon that will be rendered instead of the default one.
*/
clearButtonSvgIcon: SVGIcon;
/**
* The size property specifies the padding of the TextBox internal input element
* ([see example]({% slug appearance_textbox %}#toc-size)).
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: InputSize);
get size(): InputSize;
/**
* The `rounded` property specifies the border radius of the TextBox
* ([see example](slug:appearance_textbox#toc-roundness)).
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `full`
* * `none`
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* The `fillMode` property specifies the background and border styles of the TextBox
* ([see example]({% slug appearance_textbox %}#toc-fill-mode)).
*
* The possible values are:
* * `flat`
* * `solid` (default)
* * `outline`
* * `none`
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* The hint, which is displayed when the component is empty.
*/
placeholder: string;
/**
* Specifies the maximum length of the TextBox value.
*/
maxlength: number;
/**
* Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
/**
* Fires each time the value is changed—
* when the component is blurred or the value is cleared through the **Clear** button
* ([see example](slug:events_textbox)).
* When the value of the component is programmatically changed to `ngModel` or `formControl`
* through its API or form binding, the `valueChange` event is not triggered because it
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
*/
valueChange: EventEmitter<any>;
/**
* Fires each time the user focuses the `input` element.
*/
inputFocus: EventEmitter<any>;
/**
* Fires each time the `input` element gets blurred.
*/
inputBlur: EventEmitter<any>;
/**
* Fires each time the user focuses the TextBox component.
*
* > To wire the event programmatically, use the `onFocus` property.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-textbox (focus)="handleFocus()"></kendo-textbox>
* `
* })
* class AppComponent {
* public handleFocus(): void {
* console.log('Component is focused.');
* }
* }
* ```
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the TextBox component gets blurred.
*
* > To wire the event programmatically, use the `onBlur` property.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-textbox (blur)="handleBlur()"></kendo-textbox>
* `
* })
* class AppComponent {
* public handleBlur(): void {
* console.log('Component is blurred');
* }
* }
* ```
*/
onBlur: EventEmitter<any>;
/**
* Represents 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.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="input.focus()">Focus the input</button>
* <kendo-textbox #input></kendo-textbox>
* `
* })
* class AppComponent { }
* ```
*/
focus(): void;
/**
* Blurs 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>;
}