@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
300 lines (299 loc) • 10.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 { ElementRef, EventEmitter, NgZone, Renderer2, ChangeDetectorRef, Injector } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { SeparatorOrientation } from '@progress/kendo-angular-common';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { TextFieldsBase } from '../text-fields-common/text-fields-base';
import { TextAreaFlow } from './models/flow';
import { TextAreaResize } from './models/resize';
import { InputRounded, InputFillMode, InputSize } from '../common/models';
import { TextAreaAdornmentsOrientation } from './models/adornments-orientation';
import { TextAreaPrefixComponent } from './textarea-prefix.component';
import { TextAreaSuffixComponent } from './textarea-suffix.component';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
*/
export declare class TextAreaComponent extends TextFieldsBase implements ControlValueAccessor {
protected localizationService: LocalizationService;
protected ngZone: NgZone;
protected changeDetector: ChangeDetectorRef;
protected renderer: Renderer2;
protected injector: Injector;
hostElement: ElementRef;
/**
* @hidden
*/
focusableId: string;
hostClasses: boolean;
get flowCol(): boolean;
get flowRow(): boolean;
private _flow;
/**
* Specifies the flow direction of the TextArea sections. This property is useful when adornments are used, in order to specify
* their position in relation to the textarea element.
*
* The possible values are:
* * `vertical`(Default) —TextArea sections are placed from top to bottom.
* * `horizontal`—TextArea sections are placed from left to right in `ltr`, and from right to left in `rtl` mode.
*/
set flow(flow: TextAreaFlow);
get flow(): TextAreaFlow;
/**
* 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;
};
/**
* Specifies the orientation of the TextArea adornments. This property is used in order to specify
* the adornments' position relative to themselves.
*
* The possible values are:
* * `horizontal`(Default) —TextArea adornments are placed from left to right in `ltr`, and from right to left in `rtl` mode.
* * `vertical`—TextArea adornments are placed from top to bottom.
*/
set adornmentsOrientation(orientation: TextAreaAdornmentsOrientation);
get adornmentsOrientation(): TextAreaAdornmentsOrientation;
/**
* Specifies the visible height of the textarea element in lines.
*/
rows: number;
/**
* Specifies the visible width of the textarea element (in average character width).
*/
cols: number;
/**
* Specifies the maximum number of characters that the user can enter in the TextArea component.
*/
maxlength: number;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabindex: number;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Configures the resize behavior of the TextArea.
*
* The possible values are:
* * `vertical`(Default)—The TextArea component can be resized only vertically.
* * `horizontal`—The TextArea component can be resized only horizontally.
* * `both`—The TextArea component can be resized in both (horizontal and vertical) directions.
* * `auto`—Specifies whether the TextArea component will adjust its height automatically, based on the content.
* * `none`—The TextArea cannot be resized.
*
*/
resizable: TextAreaResize;
/**
* The size property specifies the padding of the internal textarea element
* ([see example]({% slug appearance_textarea %}#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 TextArea
* ([see example](slug:appearance_textarea#toc-roundness)).
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* The `fillMode` property specifies the background and border styles of the TextArea
* ([see example](slug:appearance_textarea#toc-fill-mode)).
*
* The possible values are:
* * `flat`
* * `solid` (default)
* * `outline`
* * `none`
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* Specifies whether the prefix separator of the TextArea is rendered.
* If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value.
*
* @default false
*/
showPrefixSeparator: boolean;
/**
* Specifies whether the suffix separator of the TextArea is rendered.
* If a suffix template is not declared, the separator will not be rendered, regardless of the parameter value.
*
* @default false
*/
showSuffixSeparator: boolean;
/**
* Fires each time the user focuses the TextArea component.
*
* > To wire the event programmatically, use the `onFocus` property.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-textarea (focus)="handleFocus()"></kendo-textarea>
* `
* })
* class AppComponent {
* public handleFocus(): void {
* console.log('Component is focused.');
* }
* }
* ```
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the TextArea component gets blurred.
*
* > To wire the event programmatically, use the `onBlur` property.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-textarea (blur)="handleBlur()"></kendo-textarea>
* `
* })
* class AppComponent {
* public handleBlur(): void {
* console.log('Component is blurred');
* }
* }
* ```
*/
onBlur: EventEmitter<any>;
/**
* Fires each time the value is changed or the component is blurred
* ([see example](slug:events_textarea)).
* When the component value is changed programmatically or via its form control binding, the valueChange event is not emitted.
*/
valueChange: EventEmitter<any>;
private initialHeight;
private resizeSubscription;
private _size;
private _rounded;
private _fillMode;
private _adornmentsOrientation;
private _inputAttributes;
private parsedAttributes;
private get defaultAttributes();
private get mutableAttributes();
constructor(localizationService: LocalizationService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, injector: Injector, hostElement: ElementRef);
ngAfterViewInit(): void;
ngOnInit(): void;
ngOnChanges(changes: any): void;
/**
* @hidden
*/
prefix: TextAreaPrefixComponent;
/**
* @hidden
*/
suffix: TextAreaSuffixComponent;
/**
* @hidden
*/
writeValue(value: string): void;
/**
* @hidden
*/
registerOnChange(fn: () => any): void;
/**
* @hidden
*/
registerOnTouched(fn: () => any): void;
updateValue(value: string): void;
ngOnDestroy(): void;
/**
* @hidden
*/
get resizableClass(): string;
/**
* @hidden
*/
get isControlInvalid(): boolean;
/**
* @hidden
*/
get isControlRequired(): boolean;
/**
* @hidden
*/
get separatorOrientation(): SeparatorOrientation;
/**
* @hidden
*/
get isFocused(): boolean;
/**
* @hidden
*/
set isFocused(value: boolean);
/**
* @hidden
*/
handleInput: (ev: any) => void;
/**
* @hidden
*/
handleInputFocus: () => void;
/**
* Focuses the TextArea component.
*
* @example
* ```ts
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="textarea.focus()">Focus the textarea</button>
* <kendo-textarea #textarea></kendo-textarea>
* `
* })
* class AppComponent { }
* ```
*/
focus(): void;
/**
* Blurs the TextArea component.
*/
blur(): void;
private resize;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleBlur(): void;
private setSelection;
private selectAll;
private handleClasses;
private handleFlow;
private setInputAttributes;
static ɵfac: i0.ɵɵFactoryDeclaration<TextAreaComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TextAreaComponent, "kendo-textarea", ["kendoTextArea"], { "focusableId": { "alias": "focusableId"; "required": false; }; "flow": { "alias": "flow"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; "adornmentsOrientation": { "alias": "adornmentsOrientation"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "showPrefixSeparator": { "alias": "showPrefixSeparator"; "required": false; }; "showSuffixSeparator": { "alias": "showSuffixSeparator"; "required": false; }; }, { "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; }, ["prefix", "suffix"], ["kendo-textarea-prefix", "kendo-textarea-suffix"], true, never>;
}